詳解AngularJS中的filter過濾器用法_AngularJS

系統的學習了一下angularjs，發現angularjs的有些思想根php的模組smarty很像，例如資料繫結，filter。如果對smarty比較熟悉的話，學習angularjs會比較容易一點。這篇簡單說一下angularjs的filter功能，angularjs的filter功能可分為二種，一種是內建的過濾器，一種是自訂的。

一，內建的過濾器
1，uppercase，lowercase大小轉換

{{ "lower cap string" | uppercase }}   //結果：LOWER CAP STRING {{ "TANK is GOOD" | lowercase }}     //結果：tank is good

 
｜這裡的豎線是一種管道功能，如果對linux比較熟悉的話，這塊的｜根linux的管道功能，基本是一樣的
2，json格式化

{{ {foo: "bar", baz: 23} | json }}  //結果：{ "foo": "bar", "baz": 23 } 

注意：bza沒格式前是沒有雙引號的，格式化後就轉換成了json資料了。
3，date格式化

{{ 1304375948024 | date }}             //結果：May 3, 2011 {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //結果：05/03/2011 @ 6:39AM {{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //結果：2011-05-03 06:39:08 

4，number格式化

{{ 1.234567 | number:1 }}  //結果：1.2 {{ 1234567 | number }}    //結果：1,234,567 

5，currency貨幣格式化

{{ 250 | currency }}         //結果：$250.00 {{ 250 | currency:"RMB ￥ " }}    //結果：RMB ￥ 250.00 

6，filter尋找

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}}  //尋找含有有s的行  //上例結果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }}  //尋找name為iphone的行  //上例結果:[{"age":20,"id":10,"name":"iphone"}] 

7，limitTo字串，對像的截取

{{ "i love tank" | limitTo:6 }}      //結果：i love {{ "i love tank" | limitTo:-4 }}     //結果：tank  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | limitTo:1 }}   //結果：[{"age":20,"id":10,"name":"iphone"}] 

8，orderBy對像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}    //根id降序排  {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }}      //根據id升序排 

二，自定filter功能
我找了一個基本angularjs的mvc架構，phonecat，自訂filter也是在這基礎寫的，這個架構挺好用的。
1，filters.js添加一個module

angular.module('tanktest', []).filter('tankreplace', function() {   return function(input) {     return input.replace(/tank/, "=====")   }; }); 

2，app.js中載入這個module

var phonecatApp = angular.module('phonecatApp', [  'ngRoute',  'phonecatControllers',  'facebookControllers',  'tanktest' ]); 

3，html中調用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //結果：===== is good 

注意：| lowercase |tankreplace管道命令可以有多個

三、filter的兩種使用方法
　　1. 在模板中使用filter
　　我們可以直接在{{}}中使用filter，跟在運算式後面用 | 分割，文法如下：

{{ expression | filter }}

　　也可以多個filter連用，上一個filter的輸出將作為下一個filter的輸入（怪不得這貨長的跟管道一個樣。。）

{{ expression | filter1 | filter2 | ... }}

　　filter可以接收參數，參數用 : 進行分割，如下：

{{ expression | filter:argument1:argument2:... }}

　　除了對{{}}中的資料進行格式化，我們還可以在指令中使用filter，例如先對數組array進行過濾處理，然後再迴圈輸出：

<span ng-repeat="a in array | filter ">

　　2. 在controller和service中使用filter
　　我們的js代碼中也可以使用過濾器，方式就是我們熟悉的依賴注入，例如我要在controller中使用currency過濾器，只需將它注入到該controller中即可，代碼如下：

app.controller('testC',function($scope,currencyFilter){  $scope.num = currencyFilter(123534); }

　　在模板中使用{{num}}就可以直接輸出$123,534.00了！在服務中使用filter也是同樣的道理。

　　此時你可能會有疑惑，如果我要在controller中使用多個filter，難道要一個一個注入嗎，這豈不太費勁了？小兄弟莫著急~ng提供了一個$filter服務可以來調用所需的filter，你只需注入一個$filter就夠了，使用方法如下：

app.controller('testC',function($scope,$filter){  $scope.num = $filter('currency')(123534);　　$scope.date = $filter('date')(new Date()); }

　　可以達到同樣的效果。好處是你可以方便使用不同的filter了。