在AngularJS的世界里，filter提供了一種格式化數據的方法，Angular也提供給我們了很多內建的過濾器，并且建立自定義過濾器也是相當的簡單
在HTML的模板綁定{{}}中，我們使用 | 來調用過濾器，比如，我們想讓字符串全部大寫字符顯示：
{{ name | uppercase }}
當然了，我們也可以在JavaScript中使用$filter服務來調用過濾器，還拿字符串大寫來舉例：
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari');}]);如何傳遞參數到filter呢？只需要把參數放在filter之后，中間加個冒號（如果有多個參數要傳遞，在每個參數后加上冒號）比如，數字過濾器可以幫助我們限制數字的位數，如果想顯示兩位小數，加上number:2就可以了
{{ 123.456789 | number:2 }}filter過濾器主要用來過濾一個數組數據并返回一個包含子數組數據的新數組。
比如，在客戶端搜索時，我們可以快速的從數組中過濾出我們想要的結果。
這個filter方法接收一個string，object，或者function參數用來選擇/移除數組元素。
下滿我們具體來看：
一，內置的過濾器
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格式化
mysql時間戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"
{{ 1304375948024 | date:'medium'}} //May 03, 2011 06:39:08 PM {{ 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查找 只能查value,不能查key
{{ [{"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':'ip'} }} //查找name like ip的行 //上例結果:[{"age":20,"id":10,"name":"iphone"}] $filter('number')(30000, 2); var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]) 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升序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:['-age','name'] }} 二，自定filter功能
filter的自定義方式也很簡單，使用module的filter方法，返回一個函數，該函數接收輸入值，并返回處理后的結果。
app.filter('過濾器名稱',function(){ return function(需要過濾的對象,過濾器參數1,過濾器參數2,...){ //...做一些事情 return 處理后的對象; } }); 我找了一個基本angularjs的mvc框架，phonecat，自定義filter也是在這基礎寫的，這個框架挺好用的。
filters.js添加一個module
angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") }; }); html中調用
{{ "TANK is GOOD" | lowercase |tankreplace}} //結果：===== is good 注意：| lowercase |tankreplace管道命令可以有多個
yourApp.filter('orderObjectBy', function() { return function(items, field, reverse) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); filtered.sort(function (a, b) { return (a[field] > b[field] ? 1 : -1); }); if(reverse) filtered.reverse(); return filtered; }; }); 該過濾器將對象轉換成標準的數組并把它通過您指定字段排序。您可以使用orderObjectBy過濾器酷似ORDERBY，包括字段名后一個布爾值，以指定的順序是否應該得到扭轉。換句話說，假的是升序，真正的下降。html調用
<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>
排序搜索
<input type="text" ng-model="search" class="form-control" placeholder="Search"> <thead> <tr> <!-- ng-class="{dropup:true}" --> <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 產品編號 <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> </th> <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 產品名稱 <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> </th> <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 產品價格 <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> </th> </tr> </thead> <tbody> <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price | currency: '￥'}}</td> </tr> </tbody> angularjs
//默認排序字段 $scope.orderType = 'id'; $scope.order = '-'; $scope.changeOrder = function(type) { console.log(type); $scope.orderType = type; if ($scope.order === '') { $scope.order = '-'; }else{ $scope.order = ''; } } 新聞熱點
疑難解答
