Latest web development tutorials

Filtro AngularJS

I filtri possono utilizzare un carattere pipe (|) per aggiungere alle espressioni e le istruzioni.

Filtro AngularJS

AngularJS filtro può essere utilizzato per convertire i dati:

filtro descrizione
valuta formattare i numeri formattati come valuta.
filtro Selezione di un sottoinsieme di elementi dalla matrice.
minuscolo Stringa di formato minuscolo.
orderBy Disposizione Array secondo un'espressione.
maiuscolo Stringa di formato maiuscolo.

Aggiungi filtro Espressioni

Filtrare attraverso un carattere pipe (|), ed un filtro viene aggiunto l'espressione. .

((Due esempi seguenti, useremo la sezione precedente citato persona controller))

stringa di filtro maiuscolo formattata in maiuscolo:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "personCtrl">

<P> nome è {{lastName | maiuscolo}} < / p>

</ Div>

Prova »

Filtro minuscolo per la formattazione di stringhe in minuscolo:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "personCtrl">

<P> nome è {{lastName | minuscolo}} < / p>

</ Div>

Prova »

Filtro di valuta

filtro digitale valuta sarà formattato come formato di valuta:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "costCtrl">

<Input type = "numero" ng -model = "quantità">
<Input type = "numero" ng -model = "prezzo">

<P> prezzo totale = {{(quantità * Prezzo) | moneta}} </ p>

</ Div>

Prova »

Aggiungere filtri per l'istruzione

Filtrare su un carattere pipe (|), e di un filtro viene aggiunto alla direttiva.

orderBy disposizione serie di filtro secondo l'espressione:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "namesCtrl">

<Ul>
<Li ng-repeat = "x nei nomi | orderBy: 'Paese'">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

<Div>

Prova »

ingresso Filtro

Filtro di ingresso attraverso un carattere pipe (|), ed un filtro viene aggiunto alla direttiva, il filtro seguito da due punti e un nome del modello.

filtri filtro selezionare un sottoinsieme dalla matrice:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "namesCtrl">

<P> <input type = " text" modello ng = "test"> </ p>

<Ul>
<Li ng-repeat = "x nei nomi | filtro: Test | orderBy: 'Paese'">
{{(X.name | maiuscolo) + ',' + x.country}}
</ Li>
</ Ul>

</ Div>

Prova »