I filtri possono essere aggiunti in AngularJS per formattare i dati.
AngularJS Filtri
AngularJS fornisce filtri per trasformare i dati:
-
currency
Formattare un numero ad un formato di valuta. -
date
Format una data in un formato specificato. -
filter
selezionare un sottoinsieme di elementi da un array. -
json
Formattare un oggetto in una stringa JSON. -
limitTo
Limiti una matrice / string, in un numero specificato di elementi / caratteri. -
lowercase
formato una stringa in minuscolo. -
number
Formattare un numero in una stringa. -
orderBy
ordina un array un'espressione. -
uppercase
formato una stringa in maiuscolo.
L'aggiunta di filtri per Espressioni
I filtri possono essere aggiunti alle espressioni utilizzando il carattere pipe |
, seguito da un filtro.
Le uppercase
stringhe di formato filtro a lettere maiuscole:
Esempio
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Prova tu stesso " Le lowercase
stringhe di formato filtro in minuscolo:
Esempio
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Prova tu stesso " L'aggiunta di filtri alle direttive
I filtri vengono aggiunti alle direttive, come ng-repeat
, utilizzando 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>
Prova tu stesso " Il filtro di valuta
La currency
del filtro formatta un numero come valuta:
Esempio
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Prova tu stesso " Per saperne di più il filtro moneta nella nostra moneta AngularJS filtro di riferimento
Il Filtro
Il filter
filtro seleziona un sottoinsieme di una matrice.
Il filter
filtro può essere utilizzato solo su array, e restituisce un array che contiene solo gli oggetti corrispondenti.
Esempio
Restituisce i nomi che contiene la lettera "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Prova tu stesso " Per saperne di più il filtro del filtro nel nostro Filtro AngularJS di riferimento
Filtro di un array in base all'input dell'utente
Impostando il ng-model
direttiva su un campo di input, possiamo usare il valore del campo di input come espressione in un filtro.
Digitare una lettera nel campo di immissione, e la lista si ridurrà / crescerà a seconda della partita:
- {{ X }}
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>
Prova tu stesso " Ordina un array in base all'input dell'utente
Fare clic sulle intestazioni di tabella per modificare l'ordinamento ::
Nome | Nazione |
---|---|
{{}} X.name | {{}} X.country |
Aggiungendo il ng-click
direttiva sulle intestazioni di tabella, siamo in grado di eseguire una funzione che modifica l'ordinamento della matrice:
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>
Prova tu stesso " Filtri personalizzati
È possibile effettuare i propri filtri registrando una nuova funzione di filtro fabbrica con il modulo:
Esempio
Fare 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>
Prova tu stesso " Il myFormat
filtro formattare ogni altro carattere in maiuscolo.