Filtri AngularJS
I filtri possono essere aggiunti in AngularJS per formattare i dati.
Filtri AngularJS
AngularJS fornisce filtri per trasformare i dati:
currency
Formatta un numero in un formato valuta.date
Formatta una data in un formato specificato.filter
Seleziona un sottoinsieme di elementi da una matrice.json
Formatta un oggetto in una stringa JSON.limitTo
Limita una matrice/stringa in un numero specificato di elementi/caratteri.lowercase
Formatta una stringa in minuscolo.number
Formatta un numero in una stringa.orderBy
Ordina una matrice in base a un'espressione.uppercase
Formatta una stringa in maiuscolo.
Aggiunta di filtri alle espressioni
I filtri possono essere aggiunti alle espressioni usando il carattere pipe |
, seguito da un filtro.
Le uppercase
stringhe di formato del filtro in maiuscolo:
Esempio
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Le lowercase
stringhe di formato del filtro in minuscolo:
Esempio
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Aggiunta di filtri alle direttive
I filtri vengono aggiunti alle direttive, come ng-repeat
, usando il carattere pipe
|
, seguito da un filtro:
Esempio
Il orderBy
filtro ordina un array:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Il filtro valuta
Il currency
filtro formatta un numero come valuta:
Esempio
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Maggiori informazioni sul filtro valuta nel nostro Riferimento filtro valuta AngularJS
Il filtro Filtro
Il filter
filtro seleziona un sottoinsieme di una matrice.
Il filter
filtro può essere utilizzato solo su array e restituisce un array contenente solo gli elementi corrispondenti.
Esempio
Restituisci i nomi che contengono la lettera "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Maggiori informazioni sul filtro del filtro nel nostro Riferimento filtro del filtro AngularJS
Filtra un array in base all'input dell'utente
Impostando la ng-model
direttiva su un campo di input, possiamo utilizzare il valore del campo di input come espressione in un filtro.
Digita una lettera nel campo di input e l'elenco si ridurrà/crescerà a seconda della corrispondenza:
- Jani
- Carlo
- Margherita
- Ege
- Gio
- Gustavo
- Birgit
- Maria
- Kai
Esempio
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Ordina una matrice in base all'input dell'utente
Fare clic sulle intestazioni della tabella per modificare l'ordinamento:
Nome | Nazione |
---|---|
Jani | Norvegia |
Carlo | Svezia |
Margherita | Inghilterra |
Ege | Norvegia |
Gio | Danimarca |
Gustavo | Svezia |
Birgit | Danimarca |
Maria | Inghilterra |
Kai | Norvegia |
Aggiungendo la ng-click
direttiva sulle intestazioni della tabella, possiamo eseguire una funzione che cambia l'ordinamento dell'array:
Esempio
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
Filtri personalizzati
Puoi creare i tuoi filtri registrando una nuova funzione di fabbrica di filtri con il tuo modulo:
Esempio
Crea un filtro personalizzato chiamato "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Il myFormat
filtro formatterà ogni altro carattere in maiuscolo.