AngularJS: filtros personalizados y ng-repeat

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:

{{result.carType.name}}, {{result.carDetails.doors}} door, £{{result.price.value}} - {{ result.company.name }}

  • {{result.carDetails.hireDuration}} day hire
  • Air conditioning
  • Unlimited Mileage
  • Theft Protection

Filters

Doors:

All 2 4 9

Provider:

Atlas Choice
Holiday Autos
Avis

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 syntax. ¿Alguien puede ayudar?

Aquí está mi Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?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:

 ... 
...

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).

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

 

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

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

 

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

    Intereting Posts