Φίλτρα AngularJS

Μπορείτε να προσθέσετε φίλτρα στο AngularJS για τη διαμόρφωση δεδομένων.

Φίλτρα AngularJS

Το AngularJS παρέχει φίλτρα για τη μετατροπή δεδομένων:

• currency Διαμορφώνει τον αριθμό σε μορφή νομίσματος
• date Διαμορφώνει τη ημερομηνία σε καθορισμένη μορφή
• filter Επιλέγει μια υποσυνοχή από τον πίνακα
• json Διαμορφώνει τον αντικείμενο σε字符串 μορφή JSON
• limitTo Περιορίζει τον πίνακα/τη συμβολοσειρά σε συγκεκριμένο αριθμό στοιχείων/χαρακτήρων
• lowercase Διαμορφώνει τη συμβολοσειρά σε πεζά
• number Διαμορφώνει τον αριθμό σε συμβολοσειρά
• orderBy Διατάσσει τα στοιχεία του πίνακα μέσω έκφρασης
• uppercase Διαμορφώνει τη συμβολοσειρά σε κεφαλαία

Προσθήκη φίλτρου σε έκφραση

Μπορείτε να προσθέσετε φίλτρα σε έκφραση χρησιμοποιώντας το pipe symbol | ακολουθούμενο από ένα φίλτρο.

uppercase Ο φίλτρο διαμορφώνει τη συμβολοσειρά σε κεφαλαία:

Παράδειγμα

<div ng-app="myApp" ng-controller="personCtrl">
<p>Το όνομα είναι {{ lastName | uppercase }}</p>
</div>

Δοκιμάστε το προσωπικά

lowercase Ο φίλτρο διαμορφώνει τη συμβολοσειρά σε πεζά:

Παράδειγμα

<div ng-app="myApp" ng-controller="personCtrl">
<p>Το όνομα είναι {{ lastName | lowercase }}</p>
</div>

Δοκιμάστε το προσωπικά

Προσθέστε φίλτρα στις εντολές

παρά χρήση του χαρακτήρα πιπετής | παρά προσθήκη φίλτρου, μπορείτε να προσθέσετε φίλτρα στις εντολές, όπως ng-repeat：

Παράδειγμα

Το φίλτρο orderBy ταξινομεί τη λίστα:

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

Δοκιμάστε το προσωπικά

Φίλτρο currency

currency Το φίλτρο μορφοποιεί τα αριθμούς ως χρήματα:

Παράδειγμα

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Τιμή: {{ price | currency }}</h1>
</div>

Δοκιμάστε το προσωπικά

Για περισσότερες πληροφορίες σχετικά με το φίλτρο currency, παρακαλώ δείτε το εγχειρίδιο αναφοράς των φίλτρων AngularJS.

Φίλτρο filter

filter Το φίλτρο επιλέγει υποσέλιδα της λίστας.

filter Το φίλτρο μπορεί να χρησιμοποιηθεί μόνο με λίστας, επιστρέφει μια λίστα που περιέχει μόνο τα ταινία που ταιριάζουν.

Παράδειγμα

Επιστρέφει τα ονόματα που περιέχουν τη λέξη "i":

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

Δοκιμάστε το προσωπικά

Για περισσότερες πληροφορίες σχετικά με το φίλτρο filter, παρακαλώ δείτε το εγχειρίδιο αναφοράς των φίλτρων AngularJS.

Φιλτράρετε τη λίστα ανάλογα με την εισαγωγή του χρήστη

παρά ρύθμιση ng-model Εντολές, μπορούμε να χρησιμοποιήσουμε την τιμή του πεδίου εισαγωγής ως έκφραση στο φίλτρο.

Εισάγετε μια λέξη στο πεδίο εισαγωγής, η λίστα θα συρρικνώσει/μεγαλώσει ανάλογα με την ταινία:

• Γιανί
• Κάρλ
• Μαργαρέτα
• Χέγκε
• Γιόζεφ
• Γουστάβ
• Μπρίγκιτ
• Μαρία
• Κάι

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Ταξινομήστε τη λίστα ανάλογα με την εισαγωγή του χρήστη

Κάντε κλικ στο κεφαλαίο της λίστας για να αλλάξετε τη σειρά ταξινόμησης:

παρά προσθήκη ng-click Εντολές, μπορούμε να εκτελέσουμε μια συνάρτηση που θα αλλάξει τη σειρά ταξινόμησης της λίστας:

Παράδειγμα

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

Δοκιμάστε το προσωπικά

Προσαρμοσμένο φίλτρο

Μπορείτε να δημιουργήσετε το δικό σας φίλτρο προσθέτοντας μια νέα λειτουργία εργοστασίου φίλτρου στον μονάδα:

Παράδειγμα

Δημιουργία ενός προσαρμοσμένου φίλτρου με το όνομα "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>

Δοκιμάστε το προσωπικά

myFormat Η φίλτρο θα μετατρέπει κάθε δυο χαρακτήρες σε κεφαλαία.