Borrar elementos de una lista

Alexander A. Ramírez M.

Hay varias facilidades que ofrece Ionic para manipular los elementos de una lista de ionic, es decir dentro del tag ion-list. Entre ellas, borrar elementos de una lista.

Partiendo el tutorial anterior vamos a hacer una modificación para mostrar la manera de utilizar ion-list y ion-delete-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-delete en el tag ion-list.
  • Crear un botón que sea presionado cuando se desea borrar un elemento de la lista.
  • Indicar al ion-item qué mostrar y qué hacer cuando se presiona el botón “Borrar” utilizando el tag ion-delete-button.
  • Modificar el controlador para manipular la lista y borrar un elemento.

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

<ion-list show-delete="showDeleteItem">

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-ios-minus-outline"
      ng-click="showDeleteItem = !showDeleteItem"></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 borrar.

<ion-item ng-repeat="item in items">
  <ion-delete-button class="ion-minus-circled">
  </ion-delete-button>
  Item 
</ion-item>

Ahora si presiona de nuevo el botón en la barra superior para borrar, aparece en cada elemento de la lista el ícono para borrar el elemento, pero si el botón de un elemento de la lista no pasa nada. Ahora hay que manejar el evento ng-click de Angular al tab ion-delete-button y especificar la función en el controlador que va a realizar la operación de borrar el elemento de la lista.

<ion-item ng-repeat="item in items">
  <ion-delete-button class="ion-minus-circled" ng-click="deleteItem(item)">
  </ion-delete-button>
  Item 
</ion-item>

Ahora en JS cree la función deleteItem para ejecutar la acción de borrar. La función debe llamar el servicio que manipula la lista y ejecutar la función para borrar un elemento.

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

$scope.deleteItem = function(item) {
  dataService.deleteDataItem($scope.items.indexOf(item));
};

Ahora modifiquemos el servicio para borrar un elemento de la lista.

getData: function() {
  return this.data;
},
deleteDataItem: function(index) {
  return this.data.splice(index, 1);
}

Ahora en la lista presione el botón de borrado en la barra superior y pruebe la funcionalidad.

Puede verificar el resultado final si lo desea.