Filtry AngularJS
Filtry można dodawać w AngularJS, aby sformatować dane.
Filtry AngularJS
AngularJS zapewnia filtry do przekształcania danych:
currency
Sformatuj liczbę do formatu waluty.date
Sformatuj datę do określonego formatu.filter
Wybierz podzbiór elementów z tablicy.json
Sformatuj obiekt do ciągu JSON.limitTo
Ogranicza tablicę/ciąg do określonej liczby elementów/znaków.lowercase
Sformatuj ciąg małymi literami.number
Sformatuj liczbę do ciągu.orderBy
Porządkuje tablicę według wyrażenia.uppercase
Sformatuj ciąg na wielkie litery.
Dodawanie filtrów do wyrażeń
Filtry można dodawać do wyrażeń za pomocą znaku potoku |
, po którym następuje filtr.
Filtruj uppercase
ciągi formatu do wielkich liter:
Przykład
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Ciągi lowercase
formatu filtra pisane małymi literami:
Przykład
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Dodawanie filtrów do dyrektyw
Filtry są dodawane do dyrektyw, takich jak ng-repeat
, za pomocą znaku potoku
|
, po którym następuje filtr:
Przykład
Filtr orderBy
sortuje tablicę:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Filtr walutowy
Filtr currency
formatuje liczbę jako walutę:
Przykład
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Przeczytaj więcej o filtrze walutowym w naszym podręczniku dotyczącym filtrów walutowych AngularJS
Filtr Filtr
Filtr filter
wybiera podzbiór tablicy.
Filtr filter
może być używany tylko w tablicach i zwraca tablicę zawierającą tylko pasujące elementy.
Przykład
Zwróć nazwy zawierające literę „i”:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Przeczytaj więcej o filtrze w naszym poradniku filtru AngularJS
Filtruj tablicę na podstawie danych wprowadzonych przez użytkownika
Ustawiając ng-model
dyrektywę na polu wejściowym, możemy użyć wartości pola wejściowego jako wyrażenia w filtrze.
Wpisz literę w polu wejściowym, a lista zmniejszy się/powiększy się w zależności od dopasowania:
- Jani
- Carl
- Małgorzata
- Hege
- Joe
- Gustaw
- Birgit
- Mary
- Kai
Przykład
<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>
Sortuj tablicę na podstawie danych wprowadzonych przez użytkownika
Kliknij nagłówki tabeli, aby zmienić kolejność sortowania::
Nazwa | Kraj |
---|---|
Jani | Norwegia |
Carl | Szwecja |
Małgorzata | Anglia |
Hege | Norwegia |
Joe | Dania |
Gustaw | Szwecja |
Birgit | Dania |
Mary | Anglia |
Kai | Norwegia |
Dodając ng-click
dyrektywę na nagłówkach tabeli, możemy uruchomić funkcję zmieniającą kolejność sortowania tablicy:
Przykład
<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>
Filtry niestandardowe
Możesz tworzyć własne filtry, rejestrując nową funkcję fabryki filtrów w swoim module:
Przykład
Utwórz niestandardowy filtr o nazwie „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>
Filtr myFormat
sformatuje każdy inny znak na wielkie litery.