angular中的orderBy过滤器使用
2015-11-15 12:47
561 查看
一 orderBy过滤器
AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array:
第一种:function,如果是function,那么function函数会遍历待排序的数组,并将返回的结果作为angular库函数中comparator的参数,进行比较排序。
第二种:如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。
第三种:如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。
如何利用orderBy,实现简单元素数组的排序,需要利用orderBy的第一参数为function的这种类型:定义function 为:
$scope.sortSimpleType(op){
return op;
}
在页面中的代码为:字符串数组排序
<div>
{{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}
</div>
排序结果为:
["barrow","bob","market","test","type"]
数字数组排序:
<div>
{{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}
</div>
排序结果为:
[1,1,2,3,6,56,3434,12121]
当然了,参数类型为function的orderBy过滤器,也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。
例如,
<div>
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}
</div>
$scope.sortObjectType = function(obj){
return obj['name']
}
排序结果为:
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]
对于这种需要按照对象属性进行排序,可以采用orderBy参数类型为string的方式,这样可以充分利用angular的排序特性,对于上述的例子可以改为:
<div>
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}
</div>
//排序结果为:
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].
针对多属性的排序,采用第三种策略,参数为array类型,如:
<div>
{{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}
</div>
//排序结果为:
[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]
到此orderBy的使用介绍已经结束。那么orderBy在angular内部是怎么实现的排序了,需要再次深入对angular的代码做出分析。
AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array:
第一种:function,如果是function,那么function函数会遍历待排序的数组,并将返回的结果作为angular库函数中comparator的参数,进行比较排序。
第二种:如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。
第三种:如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。
如何利用orderBy,实现简单元素数组的排序,需要利用orderBy的第一参数为function的这种类型:定义function 为:
$scope.sortSimpleType(op){
return op;
}
在页面中的代码为:字符串数组排序
<div>
{{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}
</div>
排序结果为:
["barrow","bob","market","test","type"]
数字数组排序:
<div>
{{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}
</div>
排序结果为:
[1,1,2,3,6,56,3434,12121]
当然了,参数类型为function的orderBy过滤器,也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。
例如,
<div>
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: sortObjectType}}
</div>
$scope.sortObjectType = function(obj){
return obj['name']
}
排序结果为:
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]
对于这种需要按照对象属性进行排序,可以采用orderBy参数类型为string的方式,这样可以充分利用angular的排序特性,对于上述的例子可以改为:
<div>
{{[{'name':'nick','age':'34'},{'name':'bob','age':'23'}]] | orderBy: 'name'}}
</div>
//排序结果为:
[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].
针对多属性的排序,采用第三种策略,参数为array类型,如:
<div>
{{[{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}]] | orderBy:[ 'name','age']}}
</div>
//排序结果为:
[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]
到此orderBy的使用介绍已经结束。那么orderBy在angular内部是怎么实现的排序了,需要再次深入对angular的代码做出分析。
相关文章推荐
- 如何在angular指令渲染模板完毕后再执行link方法,render完毕再在link中操作dom节点
- 对AngularJS中无法直接获取Promise状态的不解
- [AngularJS] Use ng-model-options to limit $digest
- AngularJS指令参数详解
- AngularJs ngInclude、ngTransclude
- AngularJs ngIf、ngSwitch、ngHide/ngShow
- AngularJs ngReadonly、ngSelected、ngDisabled
- 慎用angular.forEach
- Angular规范
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session
- 购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(1)--后端
- AngularJs ngList、ngRepeat、ngModelOptions
- angularjs学习大纲
- angularjs中service、factory和provider的区别
- angularjs 的controller的三种写法
- AngularJS:何时应该使用Directive、Controller、Service?
- AngularJS的学习--$on、$emit和$broadcast的使用
- window.location方法获取URL及window.location.assign(url)和replace(url)区别
- AngularJS模块加载