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.

Deja un comentario