angularjs中的filter(過濾器)

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

filters可以用來格式化數(shù)據(jù)。例如把時間格式化成為yyyy-MM-dd的形式來呈現(xiàn)給用戶，方便查看。angularjs內(nèi)置了一些filters，我們也可以根據(jù)自己的需要自定義一些filters.

下面是angularjs提供的filters：

currency:格式化一個數(shù)字成為一種貨幣。當(dāng)沒有提供任何貨幣符號時，使用當(dāng)前區(qū)域的默認(rèn)符號。

number:格式化數(shù)字成為文本

filter:從數(shù)組中選擇一個子集,并將其返回為一個新數(shù)組

date：基于要求的格式格式化日期為字符串

json：允許你將一個javascript對象轉(zhuǎn)化為JSON字符串

lowercase：轉(zhuǎn)換字符串成為小寫

uppercase：轉(zhuǎn)換字符串成為大寫

limitTo：將數(shù)組/字符串限定為一個指定的元素/字符數(shù)。

orderBy:通過給定的表達(dá)式指定數(shù)組，它是按字母順序排列的字符串和數(shù)值。

用法介紹：

html中用法：

filter可以用管道符 | 添加到表達(dá)式:{{expression | filter}}

也可以多個filter連用，上一個filter的輸出作為下一個filter的輸出：

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

還可以在指令中用參數(shù)：

例如: <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內(nèi)置的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過濾器將會格式化其它奇數(shù)位的字符為大寫。