javascript - change - title html css
Ejemplo de comparador de filtro de funciĆ³n angular (2)
¿Puede alguien darme un ejemplo de cómo usar el comparador de filtro angular?
Del documento oficial:
función (real, esperada): a la función se le dará el valor del objeto y el valor del predicado para que compare y debe devolver verdadero si el elemento debe incluirse en el resultado filtrado.
Hay una excelente publicación en el blog que habla sobre el filtro Angular: Diversión con los filtros AngularJS - Parte 1: el filter
filtro
Sin embargo, al final, donde busco un ejemplo útil del comparador de funciones, aún no encuentro nada.
Para necesidades de coincidencia más particulares, puede pasar una función en lugar de un valor booleano como el argumento comparador.
He probado algunas combinaciones por mi cuenta. Ni agregar la función al final de la expresión o señalar una función en el alcance hace el trabajo.
Hice algo como esto, ya que Angular itera sobre los objetos y trata de compararlos tanto de forma recursiva como de sus propiedades individuales.
// in your controller
$scope.filterMyData = function (input, search_param) {
if (input && input.propertyWeCareAbout) {
// it''s ugly, but to quickly get something done you can ignore search_param
return input.propertyWeCareAbout === $scope.SomeOtherData;
}
else {
return angular.equals(input, search_param);
}
}
<span>Quick search: </span><input type="search" ng-model=''quickSearch''/><br/>
<table>
<tr ng-repeat="obj in someHttpService.dataAsArray | filter:quickSearch:filterMyData">
<td>{{ obj.key }} </td>
<td>{{ obj.propertyWeCareAbout }}</td>
</tr>
</table>
En mi caso, "búsqueda rápida" no tiene ningún significado, y el filtrado se realizó mediante una lógica diferente. Siempre puede encadenar otro filtro al final agregando "| filter: quickSearch" en ng-repeat.
EXPLICACIÓN DETALLADA SOBRE CÓMO filter : expression : comparator
funciona.
Esta es la sintaxis del filtro:
data | filter: expression : comparator
La función de filter
integrada AngularJS proporciona una búsqueda de subcadena que no distingue entre mayúsculas y minúsculas en los datos que se pasan, comparando con la expression
cuando la expresión es una cadena o una propiedad de un objeto sujeto al filtro. El comparator
le da la capacidad de refinar aún más el filtro. Si simplemente especifica el comparator
como true
, se asegurará de que solo se devuelvan los elementos que coincidan exactamente con la expression
. Un enfoque más flexible es especificar el comparator
como una función que devuelve una función de predicado .
EJEMPLOS
Con los siguientes datos expuestos en el $scope
una vista como personas:
var people = [
{name:''John Jones'',location:''Peterborough''},
{name:''Angela Atkinson'',location:''Jersey''},
{name:''Peter Peterjon'',location:''Attleborough''}
];
Configuraremos un cuadro de búsqueda de entrada simple en la vista, que daremos como parámetro de expresión de filtro:
<input type="text" ng-model="searchText" placeholder="Search People">
1) SIN COMPARADOR
Los resultados de la búsqueda se mostrarán donde invocamos el filtro:
<p ng-repeat="person in people | filter : searchText">{{person.name}} {{person.location}}</p>
Si escribimos ''J'' en el cuadro de búsqueda, porque todas las entradas tienen un código ajeno en alguna parte, el resultado aún mostrará las 3 entradas.
Demostración: https://plnkr.co/edit/VID2CAKvUI5mjgKLImaI?p=preview
2) CON COMPARADOR COMO VERDADERO
<p ng-repeat="person in people | filter : searchText : true">{{person.name}} {{person.location}}</p>
Si escribe ''J'' no se mostrarán resultados, ya que no hay un campo que sea exactamente J. Solo obtendremos un resultado si se escribe alguno de los siguientes (distingue entre mayúsculas y minúsculas):
- John Jones
- Peterborough
- Angela atkinson
- Jersey
- Peter Peterjon
- Attleborough
Demostración: https://plnkr.co/edit/hhw2u03egXsUo7IyGc1w?p=preview
3) CON COMPARADORA COMO FUNCION
Adjuntaremos una función de predicado de comparador personalizado llamada customComparator
al $scope
del controlador. Lo configuré para requerir una coincidencia completa, pero ya no es sensible a las mayúsculas. Lo usamos de la siguiente manera:
<p ng-repeat="person in people | filter : searchText : customComparator">{{person.name}} {{person.location}}</p>
Demostración: https://plnkr.co/edit/Iy9r9bLQQdzefuzUv0TD?p=preview
4) FILTRO PERSONALIZADO
En lugar de utilizar el filter
integrado con expresión y comparador, podemos crear un filtro y canalización personalizados |
en eso. Dicho filtro personalizado que hace exactamente lo mismo que la function
ANTERIOR DEL COMPARADOR AS podría tener el siguiente aspecto:
.filter(''customFilter'',[function() {
var customFilter = function(arr,searchText){
if(! searchText)
return arr;
return arr.filter(function(arrayItem){
var match = false;
for(var key in arrayItem) {
if(! arrayItem.hasOwnProperty(key) || key === ''$$hashKey'')
continue;
if(arrayItem[key].toLowerCase() === searchText.toLowerCase()) {
match = true;
break;
}
}
return match;
});
};
return customFilter;
}])
y sería utilizado como sigue:
<p ng-repeat="person in people | customFilter : searchText">{{person.name}} from {{person.location}}</p>
Tenga en cuenta que esta sintaxis no es expression : comparator
. En su lugar, es customFilter : filterArgument
.
Demostración: https://plnkr.co/edit/wWT3cjfy7867WUSqqSKj?p=preview