在使用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