AngularJS come filtrare i valori di un elenco
07 luglio 2017
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:
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.
A volte può essere utile filtrare solo su una specifica proprietà contenuta nell'oggetto:
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:
ovviamente il valore passato al filtro non deve necessariamente essere una costante, ma può essere un altra proprietà del modello:
Nel caso servisse un filtro più complesso è anche possibile creare una funzione nel controller:
Vedi anche Filter e Filters
Può essere usato, ad esempio, con ng-repeat o ng-options:
HTML
<div ng-repeat="item in ctrl.functionAll | filter: 'valore di filtro' " ></div>
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>
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>
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>