javascript - change - title html css

Ejemplo de comparador de filtro de función angular

Question

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

Answer 1

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.

Answer 2

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