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.
No Responses