AngularJS Filter 用法 基本用法

1、什么是 AngularJS Filter？

AngularJS Filter 是用于對數(shù)據(jù)進(jìn)行過濾和格式化的指令，它可以在 HTML 模板中直接使用，也可以在控制器中使用。

2、如何使用 AngularJS Filter？

在 HTML 模板中使用過濾器：

```html

<div ngapp="myApp">

<input type="text" ngmodel="searchText">

<ul>

<li ngrepeat="item in items | filter:searchText">{{ item }}</li>

</ul>

</div>

```

在控制器中使用過濾器：

```javascript

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.items = ['apple', 'banana', 'orange'];

$scope.searchText = '';

});

```

3、常用的 AngularJS Filter 有哪些？

lowercase：將文本轉(zhuǎn)換為小寫。

uppercase：將文本轉(zhuǎn)換為大寫。

limitTo：限制顯示的字符數(shù)。

orderBy：根據(jù)指定條件對數(shù)組進(jìn)行排序。

filter：根據(jù)指定的條件過濾數(shù)組。

date：格式化日期。

number：格式化數(shù)字。

currency：格式化貨幣。

json：將對象轉(zhuǎn)換為 JSON 字符串。

removeEmptyStrings：移除空字符串。

unique：移除數(shù)組中的重復(fù)元素。

reverse：反轉(zhuǎn)數(shù)組。

startsWith、endsWith：判斷字符串是否以指定字符開頭或結(jié)尾。

substring：截取字符串的一部分。

slice：截取數(shù)組的一部分。

join：將數(shù)組元素連接成一個字符串。

replace：替換字符串中的某個字符或子串。

search：查找字符串中是否包含指定字符或子串。

match：匹配字符串是否符合指定的正則表達(dá)式。

split：將字符串分割成數(shù)組。

capitalize：將文本的首字母大寫。

limitToRange：限制顯示的字符數(shù)范圍。

timespan：格式化時(shí)間間隔。

defaultIfEmpty：如果數(shù)組為空，則返回默認(rèn)值。

removeDuplicates：移除數(shù)組中的重復(fù)元素，并保留原始順序。

unique：移除數(shù)組中的重復(fù)元素，并重新排序。

customFilter：自定義過濾器，可以根據(jù)需要編寫自己的過濾器函數(shù)。

相關(guān)問題與解（本文來源：kENgNiao.Com）答：

1、Q: 如何在 AngularJS Filter 中使用多個過濾器？

A: 可以在一個過濾器鏈中使用多個過濾器，用管道符（|）分隔每個過濾器的名稱和參數(shù)。{{ item | filter:searchText | lowercase }} 會先過濾出符合條件的項(xiàng)目，然后將結(jié)果轉(zhuǎn)換為小寫。

2、Q: 如何在控制器中自定義一個過濾器？

A: 可以在控制器中定義一個過濾器函數(shù)，并將其添加到 $scope 對象上作為屬性，然后在 HTML 模板中使用該過濾器時(shí)，只需使用過濾器名稱即可調(diào)用該函數(shù)，在控制器中定義一個名為 "customFilter" 的過濾器函數(shù)，可以這樣使用它：{{ item | customFilter }}