ตัวอย่าง
แสดงรายการที่มีตัวอักษร "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: {"name" : "H",
"city": "London"} will return the array items with a name
containing the letter "A", 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 sensitiv. 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 Tutorial: กรองเชิงมุม