实例解析angularjs的filter过滤器(2)

<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

6 先按年龄在按身高排序(多个参数写出数组形式)

<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

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>

效果展示:

!!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

个人觉得ng内置的过滤器好多都比较鸡肋。个性化的需求自定义的过滤器吧。

自定义过滤器

自定义过滤器就是返回一个函数,函数又返回你要的值即可!

实例:

angular.module('youAppName',[]) .filter('youFilterName',function(){ return function(){ //你的处理代码 return result;//返回你要的值 } })

自定义一个求和的过滤器

html

<ul> <li>!!1 求和</li> <li ng-repeat="item1 in items1"> <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div> </li> </ul>

用法:

管道前后所有参数即为和

js

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; } })

arguments--函数接受的参数集合,类数组;

Array.prototype.slice.call(arguments)

这句将类数组转为数组;

 sum+=arr[i]?arr[i]:0;

总和sum等于数组的每个元素累加的和。避免后台为传值,而又将次参数传人自定义filer函数作为参数,容错时写成0保险。

自定义一个求百分百的过滤器(求保留小数点后两位百分比)

html

<ul ng-repeat="item1 in items1"> <li>!!2 求百分比</li> <li> <b>male</b> <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i> </li> <li> <b>female</b> <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u> </li> <li> <b>gay</b> <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s> </li> </ul>

用法:

分子写在管道前面,管道后面的所有参数和加管道前的参数和则为分母

js

var nickAppModule=angular.module('nickApp',[]); nickAppModule //百分比 .filter('percentNick',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; } //0/0也是nan return sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"; } })

这里就是在上面求和的filter上多了一句:

sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"

Math内置函数,Math.round四舍五入保留整数;

将总和乘以10000除以100拼接百分比号,即保留两位小数。

完整代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfgsg.html