過濾器可以在AngularJS以格式的數據進行添加。
AngularJS過濾器
AngularJS提供過濾器來轉換數據：
-
currency格式的數字為貨幣格式。 -
date格式的日期以指定格式。 -
filter從一個陣列中選擇項目的一個子集。 -
json格式的對象到JSON字符串。 -
limitTo限制數組/串，到元素/字符的指定數量。 -
lowercase格式的字符串為小寫。 -
number格式的數字為字符串。 -
orderBy訂單由表達式的數組。 -
uppercase格式的字符串為大寫字母。
添加過濾器來表現
過濾器可以通過使用管道字符被添加到表達式| ，隨後過濾。
該uppercase過濾器格式字符串轉換為大寫：
例
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
試一試» 該lowercase過濾器格式字符串為小寫：
例
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
試一試» 添加過濾器來指令
過濾器被添加到指令，例如ng-repeat ，使用管道字符| ，隨後過濾器：
例
在orderBy過濾排序的數組：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
試一試» 貨幣過濾器
該currency的篩選器格式一些貨幣：
了解更多關於貨幣過濾器在我們AngularJS貨幣Filter參考手冊
該過濾器過濾器
該filter過濾中選擇的陣列的一個子集。
該filter過濾只能在陣列中使用，並且它返回僅包含匹配項的數組。
例
返回包含字母“i”的名稱：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
試一試» 了解更多關於過濾器過濾器在我們AngularJS濾芯過濾參考
基於用戶輸入濾波器陣列
通過設置ng-model上的輸入字段的指令，就可以使用輸入字段的值作為在過濾器表達式。
請在輸入欄中輸入字母，並且該列表會縮小/根據比賽成長：
- {{ X }}
例
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
試一試» 基於用戶輸入數組排序
點擊表頭更改排序次序::
| 名稱 | 國家 |
|---|---|
| {{x.name}} | {{x.country}} |
通過添加ng-click表格標題指令，我們可以運行改變數組的排序順序的函數：
例
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script> 試一試» 自定義過濾器
您可以通過註冊與模塊的新濾清器廠功能讓自己的過濾器：
例
讓所謂的“myFormat”自定義過濾器：
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat }}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter(' myFormat ',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
試一試» 該myFormat過濾器將每隔格式化其它字符為大寫。