personalizados filtros filtro filtrar example busqueda angularjs ng-repeat angular-filters

filtrar - filtros personalizados en angularjs



AngularJS: filtros personalizados y ng-repeat (4)

Puede llamar a más de 1 filtros de función en el mismo filtro ng-repeat

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">

Soy un novato de AngularJS y estoy construyendo una pequeña aplicación de anuncios de alquiler de automóviles que extrae algunos JSON y genera varios bits de esos datos a través de una repetición ng, con un par de filtros:

<article data-ng-repeat="result in results | filter:search" class="result"> <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header> <ul class="result-features"> <li>{{result.carDetails.hireDuration}} day hire</li> <li data-ng-show="result.carDetails.airCon">Air conditioning</li> <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li> <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li> </ul> </article> <h2>Filters</h2> <h4>Doors:</h4> <select data-ng-model="search.carDetails"> <option value="">All</option> <option value="2">2</option> <option value="4">4</option> <option value="9">9</option> </select> <h4>Provider:</h4> Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br> Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br> Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>

Ahora quiero crear un filtro personalizado en mi controlador, que pueda iterar sobre los elementos en mi ng-repeat y devolver solo los elementos que cumplan ciertos criterios; por ejemplo, podría crear una matriz de valores según las casillas de verificación de ''proveedor'' se verifican, luego se evalúa cada ítem ng-repeat con eso. Sin embargo, no puedo averiguar cómo lo haría, en términos de sintaxis. ¿Alguien puede ayudar?

Aquí está mi Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview


Si aún desea un filtro personalizado, puede pasar el modelo de búsqueda al filtro:

<article data-ng-repeat="result in results | cartypefilter:search" class="result">

Donde la definición del cartypefilter puede verse así:

app.filter(''cartypefilter'', function() { return function(items, search) { if (!search) { return items; } var carType = search.carType; if (!carType || '''' === carType) { return items; } return items.filter(function(element, index, array) { return element.carType.name === search.carType; }); }; });

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview


Si desea ejecutar alguna lógica de filtro personalizada, puede crear una función que tome el elemento de matriz como argumento y devuelva true o false función de si debe estar en los resultados de búsqueda. Luego, páselo a la instrucción de filter tal como lo haces con el objeto de search , por ejemplo:

JS:

$scope.filterFn = function(car) { // Do some tests if(car.carDetails.doors > 2) { return true; // this will be listed in the results } return false; // otherwise it won''t be within the results };

HTML:

... <article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result"> ...

Como puede ver, puede encadenar muchos filtros, por lo que agregar su función de filtro personalizada no lo obliga a eliminar el filtro anterior utilizando el objeto de search (trabajarán juntos sin problemas).


Una de las maneras más fáciles de arreglar esto es usar $ que es la búsqueda de todos.

Aquí hay un plunker que lo muestra funcionando. Cambié las casillas de verificación a la radio (porque pensé que deberían ser complementarias).

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

Si desea una forma muy específica de hacer esto (en lugar de hacer una búsqueda genérica), necesita trabajar con funciones en la búsqueda.

La documentación está aquí

http://docs.angularjs.org/api/ng.filter:filter