Φίλτρο 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: Αν η τιμή του στοιχείου του πίνακα περιέχει την τιμή που θέλουμε να συγκρίνουμε, επιστρέφει την ταιριάξουσα τιμή. Αυτή η σύγκριση δεν διακρίνει μεταξύ κεφαλαίων και πεζών. Αυτό είναι ο προεπιλεγμένος τύπος.

Συνάρτηση: Μπορούμε να ορίσουμε μια συνάρτηση για να καθορίσουμε τι θεωρείται ταιριάζον ή μη ταιριάζον.