Gli ultimi tutorial di sviluppo web
 

AngularJS filtri

❮ Precedente Successivo Capitolo ❯

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.


❮ Precedente Successivo Capitolo ❯