AngularJS filter

Man kan lägga till filter i AngularJS för att formatera data.

AngularJS filter

AngularJS erbjuder filter för att konvertera data:

• currency Formatera nummer till valutformat
• date Formatera datum till ett specifikt format
• filter Välj en delmängd från en array
• json Formatera objekt till JSON-strängar
• limitTo Begränsa arrayer/strängar till en specifik mängd element/tecken
• lowercase Formatera strängar till små bokstäver
• number Formatera nummer till strängar
• orderBy Sortera arrayer genom uttryck
• uppercase Formatera strängar till stora bokstäver

Lägg till filter till uttryck

Man kan använda kanalteckenet | för att lägga till filter till uttryck, följt av ett filter.

uppercase Filtret formaterar strängar till stora bokstäver:

Exempel

<div ng-app="myApp" ng-controller="personCtrl">
<p>Namnet är {{ lastName | uppercase }}</p>
</div>

Prova själv

lowercase Filtret formaterar strängar till små bokstäver:

Exempel

<div ng-app="myApp" ng-controller="personCtrl">
<p>Namnet är {{ lastName | lowercase }}</p>
</div>

Prova själv

Lägg till filter till anvisningen

Genom att använda kanaltecknet | följt av filter, kan du lägga till filter till anvisningen, till exempel ng-repeat:

Exempel

orderBy-filter sorterar arrayen:

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

Prova själv

currency-filter

currency Filterna formaterar nummer som valuta:

Exempel

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

Prova själv

För mer information om currency-filter, se vår AngularJS currencyfilterreferenshandbok.

filter-filter

filter Filtre väljer en delmängd av arrayen.

filter Filtre kan bara användas för arrayer, de returnerar en array som bara innehåller matchande poster.

Exempel

Returnerar namn som innehåller bokstaven "i":

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

Prova själv

För mer information om filterfilter, se vår AngularJS filterfilterreferenshandbok.

Filtrera arrayen baserat på användarinput

Genom att ställa in ng-model Anvisning, vi kan använda värdet från inmatningsfältet som ett uttryck i filtern.

Skriv in ett tecken i inmatningsfältet, listan kommer att förminska/utöka baserat på matchande poster:

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

Exempel

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

Prova själv

Sortera arrayen baserat på användarinput

Klicka på rubriken för att ändra sorteringsordningen:

Genom att lägga till i rubriken ng-click Anvisning, vi kan köra en funktion som ändrar arrayens sorteringsordning:

Exempel

<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:'Norge'},
    {name:'Carl',country:'Sverige'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norge'},
    {name:'Joe',country:'Danmark'},
    {name:'Gustav',country:'Sverige'},
    {name:'Birgit',country:'Danmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  };
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Prova själv

Anpassad filter

Du kan skapa din egen filter genom att registrera en ny filter-fabrik-funktion i modulen:

Exempel

Skapa en anpassad filter "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>

Prova själv

myFormat Filter formaterar varannan tecken till versal.