選單
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP How to W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 過濾器


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援