AngularJS filter

Man kan tilføje filtre i AngularJS til at formate data.

AngularJS filter

AngularJS tilbyder filtre til dataom转换:

• currency Formater tallet til en valutaformat
• date Formater datoen til en specificeret format
• filter Vælg en delmængde fra arrayet
• json Formater objektet til en JSON-streng
• limitTo Begræns arrayet/strengen til en specificeret mængde elementer/karakterer
• lowercase Formater streng til små bogstaver
• number Formater tal til en streng
• orderBy Sorter arrayet ved hjælp af et udtryk
• uppercase Formater streng til store bogstaver

Tilføj et filter til et udtryk

Man kan bruge pipettebetegnelsen | til at tilføje et filter til en udtryk, efterfulgt af et filter.

uppercase Filtre formaterer streng til store bogstaver:

Eksempel

<div ng-app="myApp" ng-controller="personCtrl">
<p>Navnet er {{ lastName | uppercase }}</p>
</div>

Prøv det selv

lowercase Filtre formaterer streng til små bogstaver:

Eksempel

<div ng-app="myApp" ng-controller="personCtrl">
<p Navnet er {{ lastName | lowercase }}</p>
</div>

Prøv det selv

tilføje filter til kommandoer

ved at bruge pipemærket | efterfulgt af filter, kan du tilføje filter til kommandoer, for eksempel ng-repeat：

Eksempel

orderBy filteret sorterer arrayet:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Prøv det selv

currency filter

currency Filteret formaterer tal som valuta:

Eksempel

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

Prøv det selv

For mere information om currency-filteret, se vores AngularJS currency referencehåndbog.

filter filter

filter Filter vælger en delmængde af arrayet.

filter Filter kan kun bruges på arrayer, og det returnerer et array, der kun indeholder matchende elementer.

Eksempel

Returnerer navne, der indeholder bogstavet "i":

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Prøv det selv

For mere information om filter-filteret, se vores AngularJS filter referencehåndbog.

Filtrer arrayet baseret på brugerinput

ved at sætte ng-model Kommandoer, vi kan bruge værdien af inputfeltet som udtryk i filteret.

Indtast et bogstav i inputfeltet, og listen vil blive indsnævret/udvidet baseret på matchende elementer:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Eksempel

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

Prøv det selv

Sorter arrayet baseret på brugerinput

Klik på rubrikken for at ændre rækkefølgen af sortering:

ved at tilføje i rubrikken ng-click Kommandoer, vi kan køre en funktion, der ændrer rækkefølgen af arrayet:

Eksempel

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

Prøv det selv

Brugerdefineret filter

Du kan oprette din egen filter ved at registrere en ny filter-fabrik-funktion i modulet:

Eksempel

Opret en brugerdefineret filter kaldet "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>

Prøv det selv

myFormat Filteret formaterer hvert andet tegn som store bogstaver.