系統的學習了一下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了。
新聞熱點
疑難解答
