Φίλτρο AngularJS filter
Ορισμός και χρήση
filter
Το φίλτρο επιτρέπει τη φιλτράρισμα των πινάκων και την επιστροφή μόνο των στοιχείων που ταιριάζουν.
Αυτό το φίλτρο μπορεί να χρησιμοποιηθεί μόνο με πίνακες.
Σχετικές σελίδες
Εκμάθηση AngularJS:Φίλτρο Angular
Παράδειγμα
Παράδειγμα 1
Εμφάνιση των στοιχείων που περιέχουν τη λέξη "A":
<div ng-app="myApp" ng-controller="arrCtrl"> <ul> <li ng-repeat="x in cars | filter : 'A'">{{x}}</li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('arrCtrl', function($scope) { $scope.cars = ["Aston Martin", "Audi", "Bentley", "BMW", "Bugatti"]; }); </script>
Παράδειγμα 2
Χρήση αντικειμένων ως φίλτρου:
<div ng-app="myApp" ng-controller="arrCtrl"> <ul> <li ng-repeat="x in customers | filter : {'name' : 'O', 'city' : 'London'}"> {{x.name + ", " + x.city}} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('arrCtrl', function($scope) { $scope.customers = [ {"name" : "Alfreds Futterkiste", "city" : "Berlin"} {"name" : "Around the Horn", "city" : "London"}, {"name" : "B's Beverages", "city" : "London"}, {"name" : "Bolido Comidas preparadas", "city" : "Madrid"}, {"name" : "Bon app", "city" : "Marseille"}, {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"}, {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"} ]; }); </script>
Εκτελεί
<div ng-app="myApp" ng-controller="arrCtrl"> <ul> <li ng-repeat="x in customers | filter : 'London' : true"> {{x.name + ", " + x.city}} </li> </ul> </div> <script> var app = angular.module('myApp', []); app.controller('arrCtrl', function($scope) { $scope.customers = [ {"name" : "London Food", "city" : "London"}, {"name" : "London Catering", "city" : "London City"}, {"name" : "London Travel", "city" : "Heathrow, London"} ]; }); </script>
γλώσσα γραμματικής
{{ έκφραση μερίδας | φιλτράρισμα : expression : comparator }}
参数
参数 | 描述 |
---|---|
expression |
Η έκφραση που χρησιμοποιείται για την επιλογή στοιχείων από τον πίνακα. Ο τύπος της έκφρασης μπορεί να είναι: Συμβολοσειρά: Επιστρέφει τα στοιχεία του πίνακα που ταιριάζουν με τη συμβολοσειρά. Όνειρο: Το όνειρο είναι το μοτίβο που αναζητάται στον πίνακα. Για παράδειγμα: filter: {"name" : "H", "city": "London"} θα επιστρέψει τα στοιχεία του πίνακα που περιέχουν το γράμμα "H" και την πόλη "London". Δείτε παρακάτω τα παραδείγματα. Συνάρτηση: Μια συνάρτηση που θα καλείται για κάθε στοιχείο του πίνακα και τα στοιχεία που θα επιστρέψουν true θα εμφανιστούν στον πίνακα αποτελεσμάτων. Παραδείγματα: filter: {"name" : "H", "city": "London"} θα επιστρέψει τα στοιχεία του πίνακα που περιέχουν το γράμμα "H" και την πόλη "London". Δείτε παρακάτω τα παραδείγματα. |
comparator |
Οπション. Ορίζει το επίπεδο αυστηρότητας της σύγκρισης. Η τιμή μπορεί να είναι: true: Επιστρέφει μόνο την ταιριάξουσα τιμή αν η τιμή του στοιχείου του πίνακα ταιριάζει πλήρως με την τιμή που θέλουμε να συγκρίνουμε. false: Αν η τιμή του στοιχείου του πίνακα περιέχει την τιμή που θέλουμε να συγκρίνουμε, επιστρέφει την ταιριάξουσα τιμή. Αυτή η σύγκριση δεν διακρίνει μεταξύ κεφαλαίων και πεζών. Αυτό είναι ο προεπιλεγμένος τύπος. Συνάρτηση: Μπορούμε να ορίσουμε μια συνάρτηση για να καθορίσουμε τι θεωρείται ταιριάζον ή μη ταιριάζον. |