Bộ filter AngularJS Bộ lọc
Ví dụ
Hiển thị các mục có chứa chữ “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> Hãy tự mình thử »Định nghĩa và cách sử dụng
Bộ lọc filter cho phép chúng ta lọc một mảng và trả về một mảng chỉ chứa các mục phù hợp.
Bộ lọc này chỉ có thể được sử dụng cho mảng.
Cú pháp
{{
arrayexpression | filter : expression :
comparator }}Giá trị tham số
| Value | Description |
|---|---|
| expression | The expression used when selecting
items from the array. The expression can be of type: String: The array items that match the string will be returned. Object: The object is a pattern to search for in the array. Example:
filter: {"name" : "H",
"city": "London"} will return the array items with a name
containing the letter "H", where the city contains the word "London". See
example below.Function: A function which will be called for each array item, and items where the function returns true will be in the result array. |
| comparator | Optional. Defines how strict the comparison should be. The value can be: true : Returns a match only if the value of the array item is exactly what we compare it with. false : Returns a match if the value of the array item contains what we compare it with. This comparison is not case sensitive. This is the default value. function : A function where we can define what will be considered a match or not. |
Thêm ví dụ
Ví dụ
Sử dụng một đố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>
Hãy tự mình thử »Ví dụ
Thực hiện so sánh "nghiêm ngặt", không trả về kết quả khớp trừ khi giá trị hoàn toàn giống với biểu thức:
<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>
Hãy tự mình thử »Trang liên quan
Hướng dẫn AngularJS: Bộ lọc góc
