Filtrar items en funcion de un valor externo en AngularJS

Si tenemos una lista/tabla de elementos y queremos aplicar un filtro dependiendo de un valor externo a esa lista/tabla (por ejemplo un dropdown), podemos crear nuestro propio filtro a aplicar.

Ejemplo: Filtrar Items de una tabla en funcion de un dropdown

Paso 1: Crear el dropdown con el filtro

Accion 1: Crear los valores del dropDown en el controller

$scope.myFilterValues = ["Filter 1", "Filter 2", "Filter 3"];

Accion 2: Crear el valor del filtro actual (asignaremos el primero por defecto) en el controller

$scope.selectedFilter = $scope.myFilterValues [0];

Accion 3: Creamos nuestro filtro en el controller

$scope.myFilter = function (item) {
     switch ($scope.selectedFilter) {
          case "Filter 1":
               return item.FirstProperty === 1;
          break;
          case "Filter 2":
               return item.AnotherProperty !== 1;
          break;
          case "Filter 3":
          default:
               return item;
          break;
     }
}

Esta función se ejecutará por cada item al aplicar el filtro, en cada caso del switch debemos devolver true o false en función de si queremos mostrar o no el item. Por ejemplo, si el filtro que aplicamos es el “Filter 1”, apareceran los items solo si la propiedad “FirstProperty” es igual a 1.

Accion 4: Crear la lista del dropdown con los items declarados en el controller

El código es un listado de elementos que contiene cada opción del filtro.

<ul class="dropdown-menu">
     <li ng-repeat="myFilterValue in myFilterValues"><a href="" ng-click="selectFilter(myFilterValue)">{{myFilterValue}}</a></li>
</ul>

Paso 2: Aplicar el filtro en la tabla

Accion: Añadir el filtro en el repeater que genera la lista

<div class="row" ng-repeat="item in filteredItems = (myItems | filter:myFilter) | orderBy: 'FirstProperty':true">

     <div class="col-xs-8 col-md-5">{{item.FirstProperty}}</div>

     <div class="hidden-xs hidden-sm col-md-1">{{item.AnotherProperty}}, Status</div>

     [...]

</div>

Filtramos cada item en funcion del filtro que hemos creado en el controller. En este caso además ordenamos los resultados por el valor de la columna “FirstProperty” descendente.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.