現在公司用ionic，就是基於angularjs封裝了一些api用於webapp，最近用的angularjs的filter確實省了很多程式碼，現在總結一下！
ng比較雞肋的過濾器，這裡就一筆帶過吧！雞湯類常用的filter後面上例子。
lowercase(小寫)
{{ lastName | lowercase }}
uppercase(大寫)
{{ lastName | uppercase }}
位分割，像這樣，123,456,789。同時接收一個參數，可以指定小float型保留幾個小數：
{{ num | number : 2 }}
currency (貨幣處理)
{{num | currency : '￥'}}
格式化json物件)
{{ jsonTest | json}}
作用就和我們熟悉的JSON.stringify()一樣
limitTo(限制數組長度或字串長度)
{{ children 3) | } //將會顯示數組中的前3項
filter(匹配子字串)
用來處理一個數組，然後可以過濾出含有某個子字串的元素，作為一個子數組來回傳。可以是字串數組，也可以是物件數組。如果是物件數組，可以匹配屬性的值。它接收一個參數，用來定義子字串的符合規則。
html
<ul>
<li>filter 匹配子串(以下写法只是方便观察)</li>
<li>{{ webArr | filter : 'n' }} <!--匹配属性值中含有n的--></li>
<li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
<li>{{ webArr | filter : {name : 'l'} }} <!--//参数是对象，匹配name属性中含有l的--></li>
<li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>登入後複製
js
$scope.webArr = [
{name:'nick',age:25},
{name:'ljy',age:28},
{name:'xzl',age:28},
{name:'zyh',age:30}
];
$scope.fun = function(e){return e.age>25;};登入後複製
效果展示：
filter 匹配子字串(以下寫法只是方便觀察
yyyy--表示年份；
MM--月份（必須大寫）；
dd--日期；
hh--時；
mm--分（必須小寫）；
ss--秒--秒;
EEEE--星期；
hh:mm--形式是24小時制；
h:mma--12小時制；
其中年、月、日、時、分、秒或 / ： -等自己試試搭配吧！
[{"name":"nick","age":25}]
[{"name":"nick","age":25}]
[{"name":"ljy","age":28},{"name":"xzl","age":28}]
[{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]登入後複製
日期1的顯示效果：
2016/11/19 11:59:05 Saturday
日期2的顯示效果：
天顯示效果：
2016年11月22日10時42分09秒
日期4的顯示效果：
2016/11/22 11:16:58
orderBy排序（個人認為第七例最佳寫法）
ng-repeat產生一個獨立的scope作用域，直接在ng-repeat循環後加管道orderBy排序。
用法很簡單，但有坑要注意兩點：
參數引號勿忘；
參數形式--直接寫成age，不用寫成item2.age。
3 依年齡排序(預設升序)
<ul>
<li>8 日期1</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss EEEE'"></li>
<li>8 日期2</li>
<li ng-bind="date|date:'yyyy年MM月dd日 h:mma EEEE'"></li>
<li>8 日期3</li>
<li ng-bind="date|date:'yyyy年MM月dd日 hh时mm分ss秒'"></li>
<li>8 日期4</li>
<li ng-bind="date|date:'yyyy/MM/dd hh:mm:ss'"></li>
</ul>
登入後複製
效果顯示：
<ul>
<li>3 按年龄排序(默认升序)</li>
<li ng-repeat="item2 in items2|orderBy:'age'">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
登入後複製
4 依年齡排序(加參數true則為倒序即降序)
按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165
登入後複製
先按年齡升序在依身高降序(全是降序了，達不到效果，見第7例)
我曾就天真的這樣寫過^*^
<ul>
<li ng-repeat="item2 in items2|orderBy:'age':true">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
登入後複製
效果展示：
按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170
登入後複製
6 先按年齡在依身高排序(多個參數寫出數組形式)
<ul>
<!--<li ng-repeat="item2 in items2|orderBy:'age':'-stature'">-->
<li ng-repeat="item2 in items2|orderBy:'age':'stature':true">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
登入後複製
效果展示：
想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170
登入後複製
7 先按年齡升序在按身高降序(多個參數寫出數組形式)
在參數前加負號即可實現倒序
<ul>
<li ng-repeat="item2 in items2|orderBy:['age','stature']">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
登入後複製
效果展示：
先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165
登入後複製
個人覺得ng內建的濾鏡好多都比較雞肋。個性化的需求自訂的過濾器吧。
自訂過濾器
自訂過濾器就是回傳一個函數，函數又回傳你要的值即可！
實例：
<ul>
<li ng-repeat="item2 in items2|orderBy:['age','-stature']">
<div>
<b>name</b>
<u ng-bind="item2.name"></u>
</div>
<div>
<b>age</b>
<i ng-bind="item2.age"></i>
</div>
<div>
<b>stature</b>
<i ng-bind="item2.stature"></i>
</div>
</li>
</ul>
登入後複製
自訂一個求和的過濾器
html
!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165
登入後複製
用法：
管道前後所有參數即為和
+
Array.prototype.slice.call(arguments)
這句話將類別數組轉為數組；
sum+=arr[i]?arr[i]:0;
總和sum等於數組+=arr[i]?arr[i]:0;
總和sum等於數組的每個元素累加組的和。避免後台為傳值，而將次參數傳人自訂filer函數為參數，容錯時寫成0保險。
自訂一個求百分百的過濾器（求保留小數點後兩位百分比）
html
angular.module('youAppName',[])
.filter('youFilterName',function(){
return function(){
//你的处理代码
return result;//返回你要的值
}
})登入後複製
用法：
分子寫在管道前面，管道後面的所有參數和加管道前的參數和則分母
js
<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
<div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>
登入後複製
這裡就是在上面求和的filter上多了一句：
sum==0?'0%':Math.round((arr[0]?arr[0]:0) /sum*10000)/100+"%"
Math內建函數，Math.round四捨五入保留整數；
將總和乘以10000除以100拼接百分比號，即保留兩位小數。
完整程式碼：
var nickAppModule=angular.module('nickApp',[]);
nickAppModule
//求和
.filter('sumNick',function(){
return function(){
var arr=Array.prototype.slice.call(arguments),sum=0;
for(var i= 0,len=arr.length;i<len;i++){
sum+=arr[i]?arr[i]:0;
}
return sum;
}
})登入後複製
以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，同時也希望多多支持PHP中文網！
更多實例解析angularjs的filter過濾器相關文章請關注PHP中文網！
