In questa guida, vi mostrerò, come effettuare una lista di filtri in AngularJS, il mio intento è quello di farvi capire, passo passo, ogni pezzo di codice che vi mostrerò. Iniziamo subito con l’inserimento della libreria di AngularJS tra i tag <head> della pagina HTML:

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>

Ora vi spiegherò brevemente, la struttura minima della pagina HTML, che ci servirà per effettuare i filtri:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Listra di filtri in AngularJS</title>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
</head>

<body ng-controller="PhotoListCtrl" class="ng-scope">
<div>
<div>
Search: <input name="company" type="text" class="search-input" ng-model="query"/>
</div>
<div ng-init="tagsGroup = (photos | groupBy:'tags')">
<div ng-repeat="tags in tagsGroup" class="ng-scope">
<b><input type="checkbox" ng-model="useTags[$index]" ng-init = "useTags[$index]=true"/>{{tags}}</b>
<span>({{(photos | filter:tags).length}})</span>
</div>
</div>
<div>
<ul>
<li ng-repeat="photo in photos | filter:query | filter:filterTags(photo)" class="ng-scope">
<p class="ng-binding"><b><img ng-src="photo/{{photo.file}}" alt="{{photo.description}}"/></b></p>
<p>{{photo.description}} {{photo.tags}}</p>
</li>
</ul>
</div>
</div>
<script>...</script>
</body>
</html>

In queste piccole righe di codice HTML, andiamo a inserire una casella di ricerca, in cui possiamo inserire una parola chiave, la quale ci servirà per la ricerca dell’oggetto che desideriamo filtrare: 

<div>
Search: <input name="company" type="text" class="search-input" ng-model="query"/>
</div>

Nell’istruzione successiva, andiamo ad inserire delle checkbox, quanti sono i componenti del nostro vettore che noi utilizziamo:

  <div ng-init="tagsGroup = (photos | groupBy:'tags')">
<div ng-repeat="tags in tagsGroup" class="ng-scope">
<b><input type="checkbox" ng-model="useTags[$index]" ng-init = "useTags[$index]=true"/>{{tags}}</b>
<span>({{(photos | filter:tags).length}})</span>
</div>
</div>

All’interno dell’attributo ng-model, andiamo a dare l’indice del vettore dove si trovano i tags dell’elemento, con l’attributo ng-init, dichiariamo che il valore della checkbox deve avere valore “true”, cioè a caricamento pagina tutte le checkbox sono già spuntate.

Ora prestate più attenzione, perché vi spiegherò il codice neccessario da inserire nel tag <script>.

var myApp = angular.module('myApp',[]);
function PhotoListCtrl($scope, filterFilter) {
$scope.useTags = [];
$scope.filterTags = function (photo) {
return function (pu)
{
for (var i in $scope.useTags) {
if (pu.tags == $scope.tagsGroup[i] && $scope.useTags[i]) {
return true;
}
}
};
};

Con il primo rigo di codice, andiamo a creare un modulo, che indicherà ad AngularJS come gestire la ricerca; creiamo la funzione con un proprio nome, in seguito creiamo un arrey non definendo la sua grandezza; Nel passo successivo, andiamo a creare un altra funzione, dove andiamo a dare un uguaglianza, cioè un altra funzione, in cui andiamo a passare come parametro un l’argomento, nel nostro caso photo, nell’istruzione successiva va a caricare l’argomento; Successivamente andiamo a creare un ciclo for, dove l’indice del ciclo lo dichiariamo in base a quanto è lungo l’arrey dichiarato all’inizio, dopo questo passo, creiamo un controllo in cui paragona i tags dell’argomento, se esistono nell’arrey dove sono caricati tutti i tags degli argomenti e se il valore della checkbox è di valore “true”, se questa condizione è vera, la funzione carica l’argomento, che nel nostro caso sono delle photo.

$scope.photos = [
{file: 'Car.jpg', description: 'Ferrari Rossa.', tags: 'auto rossa bella corsa'},
{file: 'Gioco.jpg', description: 'Monopoli.', tags: 'gioco da tavolo società'},
{file: 'Giochi.jpg', description: 'Giochi.', tags: 'gioco per console playstation xbox virtuali'},
];

$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);   

Innanzitutto questi due pezzi di codice, l’inseriamo all’interno della funzione principale spiegata poco prima,esse svolgono il caricamento delle photo, con la loro relativa descrizione e i rispettivi tags, molto utili per il nostro filtraggio; nel secondo pezzo di codice ci fa comparire sul nostro schermo, le nostre foto filtrate, in base ai nostri parametri i ricerca.

myApp.filter('count', function() {
return function(collection, key) {
var out = "test";
for (var i = 0; i < collection.length; i++) {
}
return out;
}
});

In queste righe, avviene tutto il meccanismo di ricerca della nostra casella inserita a inizio pagina HTML;  questa funzione va a passare come parametri tutti gli oggetti caricati e i propri tags, in seguito va ad assegnare a una variabile, ciò che abbiamo digitato all’interno della nostra casella di ricerca, al fine di tutto questo si crea un ciclo for, in cui l’indice deve essere minore della lunghezza dell’ arrey, finito questo ciclo riporta in output la variabile con il contenuto inserito.

var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key]; if (result.indexOf(value) == -1) {
result.push(value);
} }
return result;
};

Ora passiamo al filtraggio delle checkbox, come parametri passati nella funzione; passiamo l’elenco di tutti gli oggetti e i tags di essi, dichiariamo una variabile, il cui valore è uguale a un nuovo vettore; creiamo un ciclo dove l’indice deve essere inferiore al numero di oggetti contenuti nel vettore, verificato questo, va ad assegnare a una nuova variabile, un parametro di un oggetto, il quale ha un indice e dei tags corrispondenti, dopo questa assegnazione c’è un controllo dove prende i tags dell’oggetto e l’inserisce all’interno della variabile, al fine di tutto questo ciclo ci riporta il risultato.

myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});

In questa funzione va a controllare se il vettore non è nullo, se è così va ad eseguire la funzione spiegata precedentemente. 

Ecco il codice completo di tutta la mia pagina HTML, spero di esservi stato chiaro:

<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Lista di filtri in AngularJS</title>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
</head>
<body ng-controller="PhotoListCtrl" class="ng-scope"> <div>
<div>
Search: <input name="company" type="text" class="search-input" ng-model="query"/>
</div>
<div ng-init="tagsGroup = (photos | groupBy:'tags')">
<div ng-repeat="tags in tagsGroup" class="ng-scope">
<b><input type="checkbox" ng-model="useTags[$index]" ng-init = "useTags[$index]=true"/>{{tags}}</b>
<span>({{(photos | filter:tags).length}})</span>
</div>
</div> <div>
<ul>
<li ng-repeat="photo in photos | filter:query | filter:filterTags(photo)" class="ng-scope">
<p class="ng-binding"><b><img ng-src="photo/{{photo.file}}" alt="{{photo.description}}"/></b></p>
<p>{{photo.description}} {{photo.tags}}</p>
</li>
</ul>
</div>
</div> <script>
var myApp = angular.module('myApp',[]); function PhotoListCtrl($scope, filterFilter) {
$scope.useTags = [];

$scope.filterTags = function (photo) {
return function (pu)
{
for (var i in $scope.useTags) {
if (pu.tags == $scope.tagsGroup[i] && $scope.useTags[i]) {
return true;
}
}
};
}; $scope.photos = [
{file: 'Car.jpg', description: 'Ferrari Rossa.', tags: 'auto rossa bella corsa'},
{file: 'Gioco.jpg', description: 'Monopoli.', tags: 'gioco da tavolo società'},
{file: 'Giochi.jpg', description: 'Giochi.', tags: 'gioco per console playstation xbox virtuali'},
];

$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
} myApp.filter('count', function() {
return function(collection, key) {
var out = "test";
for (var i = 0; i < collection.length; i++) {
}
return out;
}
}); var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key]; if (result.indexOf(value) == -1) {
result.push(value);
} }
return result;
}; myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
</script>
</body>
</html>