En el tutorial anterior vimos como iterar una lista de objetos, el día de hoy veremos como agregar acciones en nuestros templates y como aplicar filtros a la colección de bookmarks, esto nos permitirá que al seleccionar una categoría filtremos la lista para desplegar aquellos bookmarks que pertenecen a la categoría seleccionada.

Agregar el evento click

Lo primero que vamos a hacer es definir la acción que queremos realizar. En nuestro controller agregamos el siguiente código.

(function(){
    "use strict";

    angular.module('Bookmarks',[
        //dependencies here
    ])

    .controller('MainController',function($scope){
        //...

        $scope.currentCategory = null;    //Step 1


        $scope.setCategory = function(category){ //Step 2
            $scope.currentCategory = category;          //Step 3
        }
    });

})();

1. En el paso uno definimos la propiedad currentCategory, esta propiedad estará almacenando la categoría seleccionada por el usuario, por el momento la inicializamos en nulo.
2. En el paso dos agregamos la función setCategory al objeto $scope, esto permite exponer esta función y utilizarla en el template.
3. En el paso tres asignamos la categoría seleccionada por el usuario a la propiedad que hemos definido en el paso uno.

Recordamos que todas las propiedades agregadas al objeto $scope se convierten en propiedades públicas que podemos usar en el template.

Lo siguiente es ir a modificar el template (index.html) para que cada que el usuario de click sobre una categoría ejecutemos la función setCategory.

<!-- ... -->

<ul>
    <li ng-repeat="category in categories">
        <a href="#" ng-click="setCategory(category)">{{category}}</a>
    </li>
</ul>

Mediante la directiva ng-click indicamos la función a ejecutar cada que el usuario de click sobre el nodo en cuestión. En este caso la función setCategory recibe como parámetro la categoría que se está iterando.

Realizar el filtrado

Una vez que ya sabemos que categoría ha sido seleccionada, podemos realizar el filtro sin problema alguno. Lo que tenemos que hacer es agregar el siguiente filtro al template.

<ul>
    <li ng-repeat="bookmark in bookmarks | filter: {category: currentCategory}">
        
      ...

    </li>
</ul>

Mediante un pipe (|), podemos agregar el filtro requerido, usamos un objeto para filtrar por la categoría de cada objeto, con esto cada que el currentCategory cambie, automáticamente la lista de bookmarks será filtrada.

Si en este momento probamos los cambios en el navegador veremos como la lista se filtra instantáneamente.

La directiva ng-class

Ya tenemos el filtro funcionando correctamente, ahora necesitamos mostrar de alguna manera al usuario el filtro que está seleccionado, para eso vamos a agregar la clase active a la categoría seleccionada.

<ul>
    <li ng-repeat="category in categories" ng-class="{active: isCurrentCategory(category)}">
        <a href="#" ng-click="setCurrentCategory(category)">{{category}}</a>
    </li>
</ul>

Aquí estamos usando la directiva ng-class, esta directiva nos permite agregar clases CSS de manera dinámica, en este caso agregaremos la clase active si la función isCurrentCategory nos regresa true.

El código de la función isCurrentCategory debemos definirlo en el controlador, y quedaría de la siguiente manera.

$scope.isCurrentCategory = function(category){
    return $scope.currentCategory === category;
}

Lo único que hacemos es comparar la categoría que se recibe contra la que está seleccionada, esto regresará true o false, lo que significa que la clase active se agregará o no.

Si ejecutamos nuestro código e inspeccionamos el DOM veremos que la clase active se está agregando de manera correcta. 

En el siguiente tutorial veremos como integrar bootstrap a nuestro proyecto, comenzaremos a crear el layout y poner el look and feel.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!