Ultimele tutoriale de dezvoltare web
 

AngularJS Filtre

❮ Anterior Urmatorul capitol ❯

Filtrele pot fi adăugate în AngularJS la datele de format.

AngularJS Filtre

AngularJS oferă filtre pentru a transforma datele:

  • currency Formatați un număr la un format de monedă.
  • date Format o dată într - un format specificat.
  • filter Selectați un subset de elemente dintr - o matrice.
  • json Formatarea unui obiect într - un șir JSON.
  • limitTo Limits o matrice / șir, într - un număr specificat de elemente / caractere.
  • lowercase Format un șir de caractere pentru a reduce caz.
  • number Formatați un număr la un șir de caractere.
  • orderBy Obligă o matrice cu o expresie.
  • uppercase format un șir de caractere la majuscule.

Adăugarea de filtre pentru expresii

Filtrele pot fi adăugate la expresii folosind caracterul țeavă | , Urmat de un filtru.

Cele uppercase șirurile format filtru la majuscule:

Exemplu

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
Încearcă - l singur »

Cele mai lowercase siruri de caractere format filtru pentru minuscule:

Exemplu

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
Încearcă - l singur »

Adăugarea de filtre la Directivele

Filtrele sunt adăugate directivelor, cum ar fi ng-repeat , folosind caracterul pipe | , Urmat de un filtru:

Exemplu

orderBy filtru sorteaza matrice:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Încearcă - l singur »

Filtrul de valută

currency filtrez formatele un număr ca monedă:

Exemplu

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
Încearcă - l singur »

Cititi mai multe despre filtrul valutar în nostru valută AngularJS filtru de referință

Filtrul de filtrare

filter filtru selectează un subset al unui tablou.

filter Filtrul poate fi utilizat numai pe matrice, și returnează o matrice care conține numai elementele care se potrivesc.

Exemplu

Întoarcere numele care conține litera "i" :

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>
Încearcă - l singur »

Cititi mai multe despre filtrul filtru în nostru filtru AngularJS filtru de referință

Se filtrează o matrice pe baza textului introdus de utilizator

Stabilind ng-model de directivă privind un câmp de intrare, putem folosi valoarea câmpului de intrare ca expresie într - un filtru.

Introduceți o literă în câmpul de introducere, iar lista se va micșora / crește în funcție de meci:

  • {{ X }}

Exemplu

<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>
Încearcă - l singur »

Sortarea unei matrice Bazat pe intrare utilizator

Faceți clic pe antetele de tabel pentru a schimba ordinea de sortare ::

Nume Țară
{{X.name}} {{X.country}}

Prin adăugarea ng-click directiva privind antetele de masă, putem rula o funcție care schimbă ordinea de sortare a șirului:

Exemplu

<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>
Încearcă - l singur »

Filtre personalizate

Puteți face propriile filtre prin înregistrarea unei noi funcții fabrica de filtru cu modulul:

Exemplu

Asigurați - un filtru personalizat numit "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>
Încearcă - l singur »

myFormat Filtrul va formata orice alt caracter în litere mari.


❮ Anterior Urmatorul capitol ❯