Bộ lọc AngularJS filter

Định nghĩa và cách sử dụng

filter Bộ lọc cho phép chúng ta lọc mảng và trả về mảng chỉ chứa các mục khớp.

Bộ lọc này chỉ có thể được sử dụng cho mảng.

Trang liên quan

Hướng dẫn AngularJS:Bộ lọc Angular

Mô hình

Ví dụ 1

Hiển thị các mục chứa chữ cái "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>

Thử trực tiếp

Ví dụ 2

Sử dụng đối tượng làm bộ lọc:

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

Thử trực tiếp

Ví dụ 3

Thực hiện so sánh "chặt chẽ", trừ khi giá trị hoàn toàn bằng biểu thức, không thì không trả về mục phù hợp:

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

Thử trực tiếp

Ngữ pháp

{{ arrayexpression | filter : expression : comparator }}

Tham số