Latest web development tutorials

Filtr angularjs

Filtry można użyć znaku potoku (|), aby dodać do wyrażeń i instrukcji.


Filtr angularjs

Angularjs filtr może być wykorzystywany do konwersji danych:

filtr opis
waluta Numery formatu sformatowane jako waluty.
filtr Wybranie podzbioru elementów z tablicy.
małe Format ciąg na małe litery.
orderby Układ Array według wyrażenia.
wielkie Format ciąg na duże litery.

Dodaj wyrażeń filtru

Filtrować przez postać rury (|), a filtr jest dodawany do wyrażenia. ,

((Dwa przykłady poniżej, będziemy korzystać z poprzedniej części wymienione osoba kontrolerów))

Filtr wielkie ciąg sformatowany jako wielkie litery:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "personCtrl">

<P> name is {{lastName | wielkie}} < / p>

</ Div>

Spróbuj »

małe filtr formatowania ciąg małych liter:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "personCtrl">

<P> name is {{lastName | małe}} < / p>

</ Div>

Spróbuj »

Filtr waluty

waluty filtr cyfrowy zostanie sformatowany w formacie waluty:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "costCtrl">

<Input type = "number" ng -Model = "ilość">
<Input type = "number" ng -Model = "cena">

<P> Cena całkowita = {{(ilość * cena) | waluty}} </ p>

</ Div>

Spróbuj »

Dodaj filtry z instrukcją

Filtrować przez postać rury (|), a filtr jest dodawany do Dyrektywy.

orderby układ tablicy Filtr według wzoru:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "namesCtrl">

<Ul>
<Li ng-repeat = "x w nazwach | orderby:" kraj "">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

<Div>

Spróbuj »

filtr wejściowy

Filtr wejściowy za pomocą znaku potoku (|), a filtr jest dodawany do dyrektywy, filtr z dwukropkiem i nazwą modelu.

Filtry wybrać podzbiór z tablicy:

angularjs przykłady

<Div ng-app = "myApp " NG-controller = "namesCtrl">

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

<Ul>
<Li ng-repeat = "x w nazwach | Filtr: test | orderby:" kraj "">
{{(X.name | wielkimi literami) + "," + x.country}}
</ Li>
</ Ul>

</ Div>

Spróbuj »