AngularJS filter
過濾器
示例
顯示包含字母“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 }}
引數值
值 | 描述 |
---|---|
expression | 用於從陣列中選擇專案的表示式。表示式可以是以下型別: 字串:將返回與字串匹配的陣列項。 物件:物件是用於在陣列中搜索的模式。例如: filter: {"name" : "H", "city": "London"} 將返回名稱包含字母“H”且城市包含單詞“London”的陣列項。請參見下面的示例。函式:將為每個陣列項呼叫的函式,並且函式返回 true 的項將在結果陣列中。 |
comparator | 可選。定義比較的嚴格程度。該值可以是: true:僅當陣列項的值與我們比較的值完全相同時才返回匹配項。 false:如果陣列項的值包含我們比較的值,則返回匹配項。此比較不區分大小寫。這是預設值。 function:一個函式,我們可以在其中定義什麼將被視為匹配項。 |
更多示例
示例
使用物件作為過濾器
<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 教程:Angular 過濾器