Ofreciendo opciones en las listas

Otra forma de trabajar con la lista es ofrecer al usuario la opción de delizamiento a la izquierda (swipe left) en cada elemento de la lista.

Esa opción en Ionic se denomina botones de opción (option buttons) y se logra mediante la directiva ion-option-button. Esta opción es hija de item-item.

Sólo se debe especificar a cada item-item las opciones mediante la directiva y se manega el evento con la directiva ng-click de AngularJS.

Ingrese a play.ionic.io para obtener el código para iniciar el tutorial y haga FORK. No olvide hacer FORK.

El objetivo es:

• Especificar el identificador de la lista a través del atributo delegate-handle de ion-list.
• Crear las opciones en cada elemento (ion-item).
• Especificar mediante la directiva ng-click que función va a manejar el evento en el controlador.
• Modificar el controlador para manejar cada evento de cada opción.

En el HTML, en la directiva ion-list de Ionic agregue el atributo y especifique el nombre de la lista “my-list”.

<ion-list delegate-handle="my-list">

En el HTML, en cada elemento agregue tres opciones, una para borrar, una para subir un elemento y otra para bajarlo en el orden.

<ion-item ng-repeat="item in items">
  <ion-option-button class="button-assertive icon ion-trash-a">
  </ion-option-button>
  <ion-option-button class="button-balanced icon ion-arrow-up-a">
  </ion-option-button>
  <ion-option-button class="button-positive icon ion-arrow-down-a">
  </ion-option-button>
  Item 
</ion-item>

Ahora en cada opción agreguemos el manejo del evento a través de la directiva ng-click.

<ion-item ng-repeat="item in items">
  <ion-option-button class="button-assertive icon ion-trash-a" 
    ng-click="deleteClick(item)"></ion-option-button>
  <ion-option-button class="button-balanced icon ion-arrow-up-a" 
    ng-click="upClick(item)"></ion-option-button>
  <ion-option-button class="button-positive icon ion-arrow-down-a" 
    ng-click="downClick(item)"></ion-option-button>
  Item 
</ion-item>

Lo primero que debemos hacer es inyectar el servicio para manejar las listas $ionicListDelegate.

.controller('contentController', function($scope, $ionicListDelegate) {

Una vez agregado el servicio ahora debemos definir las funciones deleteClick, upClick y downClick en el controlador.

  $scope.deleteClick = function(item) {
    
  };
  $scope.upClick = function(item) {
    
  };
  $scope.downClick = function(item) {
    
  };

Ahora vamos a cerrar el menú de opciones cada vez que se haga click a alguna opción.

  $scope.deleteClick = function(item) {
    $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
  };
  $scope.upClick = function(item) {
    $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
  };
  $scope.downClick = function(item) {
    $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
  };

Ahora puede observar que una vez que desliza el menú a la izquierda y luego escoge una opción, el menú se cierra. Esto se logra utilizando el método closeOptionButtons. Se usa el servicio $ionicListDelegate, se obtiene el identificador (handle) de la lista. Fíjese que el nombre es el que definimos en el HTML (‘my-list’).

Ahora falta ejecutar la acción correspondiente en cada controlador.

deleteClick

$scope.deleteClick = function(item) {
  $scope.items.splice($scope.items.indexOf(item), 1);
  $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
};

upClick

$scope.upClick = function(item) {
  var index = $scope.items.indexOf(item);
  if (index>0) {
    $scope.items.splice(index, 1);
    $scope.items.splice(index-1, 0, item);
  }
  $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
};

downClick

$scope.downClick = function(item) {
  var index = $scope.items.indexOf(item);
  if (index<$scope.items.length) {
    $scope.items.splice(index, 1);
    $scope.items.splice(index+1, 0, item);
  }
  $ionicListDelegate.$getByHandle('my-list').closeOptionButtons();
};

Ahora puede revisar la funcionalidad de cada botón. El propósito de las opciones puede ser Editar o Compartir un elemento de la lista. Se hizo la prueba para Borrar o reordenar aunque para borrar existe la directiva ion-delete-button y para reordenar existe ion-reorder-button visto en los tutoriales respectivos, Borrar elementos de una lista y Reordenar elementos de una lista.

Puede consultar el resultado final si lo desea. Maria Gabriela lo juntó todo y esta es su solución y otra interesante con canvas.