angularjs中的filter(過濾器)

源文地址：http://www.ncloud.hk/技術分享/angularjs中的filter-過濾器/

filters能夠用來格式化數據。例如把時間格式化成爲yyyy-MM-dd的形式來呈現給用戶，方便查看。angularjs內置了一些filters，咱們也能夠根據本身的須要自定義一些filters.

下面是angularjs提供的filters：

currency:格式化一個數字成爲一種貨幣。當沒有提供任何貨幣符號時，使用當前區域的默認符號。

number:格式化數字成爲文本

filter:從數組中選擇一個子集,並將其返回爲一個新數組

date：基於要求的格式格式化日期爲字符串

json：容許你將一個javascript對象轉化爲JSON字符串

lowercase：轉換字符串成爲小寫

uppercase：轉換字符串成爲大寫

limitTo：將數組/字符串限定爲一個指定的元素/字符數。

orderBy:經過給定的表達式指定數組，它是按字母順序排列的字符串和數值。

用法介紹：

html中用法：

filter能夠用管道符 | 添加到表達式:{{expression | filter}}

也能夠多個filter連用，上一個filter的輸出做爲下一個filter的輸出：

{{expression | filter1 | filter2 |……}}

還能夠在指令中用參數：

例如: <li ng-repeat=「x in names | orderBy:’country’」>

或<li ng-repeat=「x in names | filter : ‘i’>

javascript中用法：

例：$scope.formatDate = $filter('date')(today, 'yyyy-MM-dd');

有時候angularjs內置的filter不夠用，咱們就能夠本身定義一個過濾器。

例如定義一個名爲「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() {

returnfunction(x) {

var i, c, txt = "";

x = x.split("")

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過濾器將會格式化其它奇數位的字符爲大寫。