Filtraggio AngularJS

È possibile aggiungere filtri in AngularJS per formattare i dati.

Filtraggio AngularJS

AngularJS fornisce filtri per trasformare i dati:

• currency Formattare un numero in un formato monetario
• date Formattare una data in un formato specificato
• filter Selezionare un sottoinsieme da un array
• json Formattare un oggetto in una stringa JSON
• limitTo Limitare un array o una stringa a un numero specificato di elementi o caratteri
• lowercase Formattare la stringa in minuscolo
• number Formattare un numero in una stringa
• orderBy Ordinare un array tramite un'espressione
• uppercase Formattare la stringa in maiuscolo

Aggiungere un filtro all'espressione

È possibile aggiungere un filtro all'espressione utilizzando il simbolo管道符 |, seguita da un filtro.

uppercase Il filtro formatta la stringa in maiuscolo:

Esempio

<div ng-app="myApp" ng-controller="personCtrl">
<p>Il nome è {{ lastName | uppercase }}</p>
</div>

Prova personalmente

lowercase Il filtro formatta la stringa in minuscolo:

Esempio

<div ng-app="myApp" ng-controller="personCtrl">
<p>Il nome è {{ lastName | lowercase }}</p>
</div>

Prova personalmente

Aggiungi un filtro all'indicazione

Utilizzando il carattere pipe | Seguito da un filtro, possiamo aggiungere un filtro all'indicazione, ad esempio ng-repeat：

Esempio

Il filtro orderBy ordina l'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 personalmente

currency filtro

currency Il filtro formatta i numeri come valuta:

Esempio

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Prezzo: {{ price | currency }}</h1>
</div>

Prova personalmente

Per ulteriori informazioni sul filtro currency, consulta la nostra guida di riferimento AngularJS currency.

filter filtro

filter Il filtro seleziona un sottoinsieme dell'array.

filter Il filtro può essere utilizzato solo per array, restituisce un array che contiene solo le corrispondenze.

Esempio

Restituisce 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>

Prova personalmente

Per ulteriori informazioni sul filtro filter, consulta la nostra guida di riferimento AngularJS filter.

Filtra l'array in base all'input dell'utente

Impostando il campo di input ng-model L'indicazione, possiamo utilizzare il valore del campo di input come espressione nel filtro.

Inserisci una lettera nel campo di input, la lista si ridurrà/espanderà in base alle corrispondenze:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• 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>

Prova personalmente

Ordina l'array in base all'input dell'utente

Fare clic sull'intestazione della tabella per cambiare l'ordine di sortimento:

Aggiungendo una intestazione di tabella ng-click L'indicazione, possiamo eseguire una funzione che cambia l'ordine di sortimento 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>

Prova personalmente

Filtro personalizzato

Puoi creare il tuo filtro aggiungendo una nuova funzione di fabbrica di filtri al modulo:

Esempio

Creare 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 personalmente

myFormat Il filtro formatta ogni carattere ogni due spazi in maiuscolo.