實例解析angularjs的filter過濾器
- 高洛峰原創
- 2017-02-07 13:59:07867瀏覽
現在公司用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中文網！