<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拼接百分比号,即保留两位小数。
完整代码: