AngularJS come filtrare i valori di un elenco

In AngularJS è possibile filtrare un elenco di valori tramite la keyword filter è l'operatore pipe |.
Può essere usato, ad esempio, con ng-repeat o ng-options:

HTML

<div ng-repeat="item in ctrl.functionAll | filter: 'valore di filtro' " ></div>
in questo caso fa una ricerca parziale sui ogni proprietà di ogni item di ctrl.functionAll e restituisce solo gli elementi che fanno match con la condizione di filtro.
ctrl è l'alias del mio controller

A volte può essere utile filtrare solo su una specifica proprietà contenuta nell'oggetto:

HTML

<select ng-options="v.i as v.d for v in ctrl.functionAll | filter : {scope: {i: 4}}" ></select>
anche in questo caso la ricerca è parziale sulla propietà scope.i.

Se voglio un match esatto posso aggiungere la keyword true in coda al filtro separato da un due punti:

HTML

<select ng-options="v.i as v.d for v in ctrl.functionAll | filter : {scope: {i: 4}} : true" ></select>
ovviamente il valore passato al filtro non deve necessariamente essere una costante, ma può essere un altra proprietà del modello:

HTML

<select ng-options="v.i as v.d for v in ctrl.functionAll | filter : {scope: ctrl.form.idScope} : true" ></select>

Nel caso servisse un filtro più complesso è anche possibile creare una funzione nel controller:

JavaScript

self.filterScope = function(item){
  if(item.scope.i === self.form.idScope) // if(item.scope.i === 4)
    return true;
  else
   return false;
};
se non si usano gli alias sostituire self con $scope

HTML

<select ng-options="v.i as v.d for v in ctrl.functionAll | filter : ctrl.filterScope" ></select>
Vedi anche Filter e Filters
Tags:
Angular JS10 Esempi225 HTML74 JavaScript184 MVVM6
Potrebbe interessarti anche: