在使用ng框架做項目的時候,我們可能會使用到ng自帶的過濾器,來進行數據的篩選
一:ng自帶的過濾器:currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter
過濾器有兩種使用方法:第一種,頁面是直接使用;第二種,js中使用
以上的過濾器的使用時偏簡單的,查看文檔對你很有用
這里,我們來講解一下 上面的簡單中的很少用到的json,filter
關於json過濾器的作用是將一個javaScript對象轉化為一個JSON字符串:
demo:
<div> {{ {name: 'Ari', City: 'SanFrancisco'} | json }} </div>
頁面顯示的效果是:{ "name": "Ari", "City": "SanFrancisco" }
關於filter過濾器的用法:
頁面中直接使用
<div> {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }} </div>
頁面顯示的效果是:["aaassddd","kkklljj"]
舉一個在js中使用的demo吧
<!doctype html> <html lang="en" ng-app="myApp"> <head> <script src="angular.js"></script> </head> <body> <div ng-controller="filterCtrl"> {{name}} {{dollar}} {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} {{ {name: 'Ari', City: 'SanFrancisco'} | json }} {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }} </div> </body> </html> <script> angular.module("myApp",[]) .controller("filterCtrl",["$scope","$filter","currencyFilter",function(s,f,c){//方式一:直接使用$filter, 方式二:使用***Filter s.name=f('lowercase')("ARTDF"); s.dollar=c(234); }]) </script>
二:講解了ng的內置過濾器,我們來 學學如何自定義過濾器
ng的自定義過濾器返回的是一個函數,我們可以在這個函數里進行系列操作
js:
var myFilter=angular.module("filterModule",[]) .filter("filter1",function(){ return function(item){ return item+'ABCDE'; } });
html:
<div>{{432432423432| date:"yyyy-MM-dd"|filter1}}</div>
結果:1983-09-15ABCDE
demo2:自定義過濾器(直接上例子)
<!doctype html> <html lang="en" ng-app="myApp"> <head> <script src="lodash.js"></script> <script src="angular.js"></script> </head> <body ng-controller="myCtrl"> <div ng-repeat="t in list | filterByObj:arr">{{t}}</div> </body> </html> <script> var app=angular .module("myApp",[]) .controller("myCtrl",function($scope){ $scope.list=[1,3,4,5,12,23,6]; $scope.arr=[6,5,3,1]; }) .filter("filterByObj",[function(){ return function(list,obj){ var result=[]; angular.forEach(list,function(item){ var isEqual=true; for(var e in obj){ if(item==obj[e]){ result.push(item); } } }); return result; } }]); </script>
結果:1,3,5,6
借鑒資源鏈接:http://www.oschina.net/translate/angularjs-filter-creating-custom-filter