Reordenar elementos de una lista

Alexander A. Ramírez M.

Otra de las facilidades que ofrece Ionic es la posibilidad para reordenar elementos de una lista. Esto se hace a través del atributo show-reorder de ion-list.

Partiendo de otro tutorial vamos a hacer una modificación para mostrar la manera de utilizar ion-list y ion-reorder-button en una pantalla con una lista.

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 atributo show-reorder en el tag ion-list.
  • Crear un botón que sea presionado cuando se desea reordenar la lista.
  • Indicar al ion-item qué mostrar y qué hacer cuando se presiona el botón “Reordenar” utilizando el tag ion-reorder-button.
  • Modificar el controlador para reordenar la lista.

En el HTML hay que agregar el atributo show-reorder al tag ion-list.

<ion-list show-reorder="showReorder">

Ahora vamos a crear un botón que permita al usuario indicar si desea borrar un elemento de la lista.

<ion-header-bar class="bar-positive">
  <div class="buttons">
    <button class="button button-icon icon ion-shuffle"
      ng-click="showReorder = !showReorder">
    </button>
    <h1 class="title">Ionic List</h1>
  </div>
</ion-header-bar>

Ahora puede ver que hay un botón en la barra superior, pero no hace nada. Nos corresponde ahora indicar en cada elemento de la lista qué debe hacer cuando se presiona el botón. Eso lo hacemos agregando el tag ion-reorder-button dentro de cada elemento de la lista, es decir, dentro del ion-item.

<ion-item ng-repeat="item in items">
  <ion-reorder-button class="ion-navicon">
  </ion-reorder-button>
  Item 
</ion-item>

Ahora si presiona de nuevo el botón en la barra superior para reordenar, aparece en cada elemento de la lista el ícono para reordenarlo, pero mueve un elemento de la lista todavía no pasa nada. Ahora hay que manejar el evento on-reorder de Ionic al tab ion-reorder-button y especificar la función en el controlador que va a realizar la operación de reordenar los elementos.

<ion-item ng-repeat="item in items">
  <ion-reorder-button class="ion-navicon"
    on-reorder="reorderItem(item, $fromIndex, $toIndex)">
  </ion-reorder-button>
  Item 
</ion-item>

Ahora en JS cree la función reorderItem para ejecutar la acción de reordenar.

Tenemos que agregar una función en el controlador y otra en el servicio. Vamos con la primera.

$scope.reorderItem = function(item, fromIndex, toIndex) {
  dataService.reorderDataItem(item, fromIndex, toIndex);
};

Ahora modifiquemos el servicio para reordenar la lista.

getData: function() {
  return this.data;
},
reorderDataItem: function(item, from, to) {
  this.data.splice(from, 1);
  this.data.splice(to, 0, item);
}

Ahora en la lista presione el botón para reordenar en la barra superior y pruebe la funcionalidad.

Puede verificar el resultado final si lo desea.