filter
ตัวกรองAngularJS
ตัวอย่าง
แสดงรายการที่มีตัวอักษร "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>
ความหมายและการใช้งาน
ตัวfilter
กรองช่วยให้เราสามารถกรองอาร์เรย์ และส่งคืนอาร์เรย์ที่มีเฉพาะรายการที่ตรงกันเท่านั้น
ตัวกรองนี้ใช้ได้กับอาร์เรย์เท่านั้น
ไวยากรณ์
{{
arrayexpression | filter : expression :
comparator }}
ค่าพารามิเตอร์
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. |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้วัตถุเป็นตัวกรอง:
<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>
หน้าที่เกี่ยวข้อง
บทช่วยสอน AngularJS: ตัวกรองเชิงมุม