AngularJS-filters
Filters kan in AngularJS bygevoeg word om data te formateer.
AngularJS-filters
AngularJS bied filters om data te transformeer:
currencyFormateer 'n getal na 'n geldeenheidformaat.dateFormateer 'n datum na 'n gespesifiseerde formaat.filterKies 'n subset van items uit 'n skikking.jsonFormateer 'n voorwerp na 'n JSON-string.limitToBeperk 'n skikking/string tot 'n gespesifiseerde aantal elemente/karakters.lowercaseFormateer 'n string na kleinletters.numberFormateer 'n getal na 'n string.orderByRangskik 'n skikking volgens 'n uitdrukking.uppercaseFormateer 'n string na hoofletters.
Voeg filters by uitdrukkings
Filters kan by uitdrukkings gevoeg word deur die pypkarakter te gebruik |, gevolg deur 'n filter.
Die uppercasefilterformaat stringe na hoofletters:
Voorbeeld
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Die lowercasefilterformaat stringe na kleinletters:
Voorbeeld
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Voeg filters by riglyne
Filters word by voorskrifte gevoeg, soos ng-repeat, deur die pypkarakter te gebruik
|, gevolg deur 'n filter:
Voorbeeld
Die orderByfilter sorteer 'n skikking:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Die geldeenheid Filter
Die currencyfilter formateer 'n getal as geldeenheid:
Voorbeeld
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Lees meer oor die geldeenheidfilter in ons AngularJS-geldeenheidfilterverwysing
Die filter Filter
Die filterfilter kies 'n subset van 'n skikking.
Die filterfilter kan slegs op skikkings gebruik word, en dit gee 'n skikking terug wat slegs die ooreenstemmende items bevat.
Voorbeeld
Gee die name terug wat die letter "i" bevat:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Lees meer oor die filterfilter in ons AngularJS-filterfilterverwysing
Filtreer 'n skikking gebaseer op gebruikerinvoer
Deur die ng-modelopdrag op 'n invoerveld te stel, kan ons die waarde van die invoerveld as 'n uitdrukking in 'n filter gebruik.
Tik 'n letter in die invoerveld, en die lys sal krimp/groei, afhangende van die pasmaat:
- Jani
- Carl
- Margareth
- Hege
- Joe
- Gustav
- Birgit
- Maria
- Kai
Voorbeeld
<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>
Sorteer 'n skikking gebaseer op gebruikerinvoer
Klik op die tabelopskrifte om die sorteervolgorde te verander::
| Naam | Land |
|---|---|
| Jani | Noorweë |
| Carl | Swede |
| Margareth | Engeland |
| Hege | Noorweë |
| Joe | Denemarke |
| Gustav | Swede |
| Birgit | Denemarke |
| Maria | Engeland |
| Kai | Noorweë |
Deur die ng-clickopdrag op die tabelopskrifte by te voeg, kan ons 'n funksie uitvoer wat die sorteervolgorde van die skikking verander:
Voorbeeld
<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>
Pasgemaakte filters
Jy kan jou eie filters maak deur 'n nuwe filterfabriekfunksie by jou module te registreer:
Voorbeeld
Maak 'n pasgemaakte filter genaamd "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>
Die myFormatfilter sal elke ander karakter na hoofletters formateer.