Uso de listas en Ionic

Alexander A. Ramírez M.

Siguiendo con los tutoriales sobre Ionic vamos a trabajar con listas y su uso básico.

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial.

El objetivo es mostrar una lista de items en pantalla usando ion-list y ion-item. Se debe especificar el controlador de la pantalla, agregar una lista a la pantalla y crear el controlador para dar acceso a los datos y luego mostrarlos en pantalla utilizando ng-repeat.

Se va a conseguir con una mini aplicación con una pantalla con un encabezado con fondo azul en el HTML y en el JS está definido el módulo app.

El código del HTML es el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta 
      name="viewport" 
      content="initial-scale=1, maximum-scale=1, user-scalable=no, 
        width=device-width">
    <link 
      href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" 
      rel="stylesheet">
    <script 
      src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js">
    </script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-positive">
        <div class="buttons">
          <h1 class="title">Ionic List</h1>
        </div>
      </ion-header-bar>
    
      <ion-content>
        
      </ion-content>
    </ion-pane>
  </body>
</html>

El código del JS es el siguiente:

angular.module('app', ['ionic'])

Vamos a crear una lista dentro del tag ion-content utilizando el tag ion-list y cree un primer item utilizando el tag ion-item, en el contenido del item agregue la palabra Item.

<ion-content>
  <ion-list>
    <ion-item>
      Item
    </ion-item>
  </ion-list>
</ion-content>

Ahora ya tiene una lista con un item. La forma de crear listas que tienen conexión con el controlador es utilizar los tags específicos de ionic. Ud. podría crear una lista mediante la clase CSS list si sólo quiere aplicar el estilo de una lista a algún elemento del DOM.

Como lo usual es que la vista (nuestra pantalla) muestre los datos que se proporcionan a través del controlador, ahora nos corresponde definir el controlador para esta pantalla.

Primero definamos el controlador agregando al tag ion-content la directiva ng-controller e indique que el nombre del controlador es contentController. Esta directiva (que proporciona AngularJS) permite asociar un controlador a este segmento de contenido (al contenido en ion-content) en la pantalla.

<ion-content ng-controller="contentController">

</ion-content>

Ahora vamos a definir contentController en JS. Esto se hace definiendo un controlador con la llamada a .controller y especificando como parámetros el nombre (contentController) y la función que va a ser ejecutada. Es decir, la forma general de definir un controlador es la siguiente:

.controller('NOMBRE DEL CONTROLADOR', function(Servicios que se desea inyectar){
  // Contenido del controlador
});

Normalmente a los controladores se le inyecta $scope, nuestro controlador quedaría:

.controller('contentController', function($scope){
  // Contenido del controlador
});

Ahora debemos especificar los datos que le vamos a exponer a la pantalla (la vista) a través de $scope. Vamos a definir un arreglo denominado items ($scope.items) y le vamos a asignar los valores. El arreglo va a estar compuesto por 10 items con un atributo de nombre id y un valor numérico.

.controller('contentController', function($scope){
  // Contenido del controlador
  $scope.items = [
    { id: "1" },
    { id: "2" },
    { id: "3" },
    { id: "4" },
    { id: "5" },
    { id: "6" },
    { id: "7" },
    { id: "8" },
    { id: "9" },
    { id: "10"}
  ];
});

Ahora debemos utilizar items en la vista. Para ello vamos a recorrer el arreglo de items utilizando la directiva ng-repeat que proporciona AngularJS de la siguiente manera:

<ion-item ng-repeat="item in items">
  Item { { item.id } }
</ion-item>

Note que en la vista no es necesario colocar $scope.items, es suficiente con especificar items (en el ng-repeat) para acceder a esta variable definida en el controlador.

Puede verificar el resultado final si lo desea.