Introducción a Angular JS

Uso de filtros Más videos

Descripción del tema

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

9Comentarios

  • Avatar-6 Cristobal 30/12/2014

    Estimado, una fe de errata: $scope.category = null; //Step 1 $scope.setCategory = function(category){ //Step 2 $scope.category = category; //Step 3 } Debería ser: $scope.currentCategory = null; //Step 1 $scope.setCategory = function(category){ //Step 2 $scope.currentCategory = category; //Step 3 }

  • Avatar-7 Facundo López 28/03/2015

    Hola. Muchas gracias por el curso capo de la vida! Te hago una humilde sugerencia: Podrias 'dockear' al top la barra o panel derecho para que este siempre visible. Por lo general cuando uno termina el capitulo se dispone a pasar al siguiente y hay que scrollear hasta arriba. Saludos

    • Avatar-5 Crysfel Villa 10/04/2015

      Excelente sugerencia! Lo he agregado a mi lista de TODOs, también quiero quitar la barrita de color verde y en su lugar poner el indice del lado lateral para mejor acceso. Gracias por la sugerencia!!

    • Avatar-3 oscarcareaga.careaga 03/10/2015

      Buen tutorial, estoy siguiendo es muy interesante estoy introduciendo me a esta tecnología..

      • Avatar-5 ditmarcastro 31/10/2015

        Excelente Crysfel

        • Avatar-10 Diego Romero 13/11/2015

          Hola a todos, espero que esten bien. Les cuento que hice el ejercicio y me abre una nueva pagina cuando hago click en alguna de las tecnologias y no me realiza el filtro. Este es mi codigo <ul> <li> <a href="#">{{category}}</a> </li> </ul> <ul> {{currentCategory}} <li> <p> <a href="{{bookmark.url}}"> {{bookmark.name}}</a> {{bookmark.url}} </p> </li> </ul>

          • Avatar-1 santos 22/01/2017

            Excelente amigo, soy nuevo manejando angular y esto me sirve de mucha ayuda

            • Avatar-6 Pablo Cesar Farias 31/01/2018

              Hola buen día, Crysfel, te queria preguntar como se hace este mismo ejemplo pero cuando trae todos esos datos pero desde una DB como puedo saber que campo traer en el filtro si los datos contenidos en una tabla de la DB son varios y como abstraerlo y usralo aquí en Angular para hacer el filtro, gracias por responder

              Instructor del curso

              Crysfel3

              Autor: Crysfel Villa

              Ha participado en varios proyectos con Angular y es participante activo del grupo de Angular NYC.

              Descarga video Descarga Código Fuente Ver Demostración

              Regístrate a este curso

              Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

              Tendrás acceso a descargar los videos, códigos y material adicional.

              Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

              Llevarás un registro de tu avance.