AngularJS orderBy 使用要点
AngularJS orderBy 使用要点总结:
1,书写格式
基本应用格式为:
ng-repeat="item in itemList | orderBy:p1:p2"
参数p1可以是字段名或自定义函数,p2指是否逆序,默认是false
举例:
假设$scope中有
$scope.itemList=[{id:201,name:'abc',amount:100},{id:100,name:'zdb',amount:100},
{id:10,name:'xxx',amount:200},{id:80,name:'231',amount:1020},
{id:50,name:'ppp',amount:20},{id:1,name:'hhh',amount:1100}];
按照id,倒排序
1 | ng-repeat= "item in itemList | orderBy:'id':true" |
2,自定义排序:
controller中设置自定义函数,函数接受参数为当前的item,需要返回一个数值代表该item的顺序
$scope.orderIt=function(item){ if(item.name.indexOf('h')===0)return 0; return 1; };
使用方法:
ng-repeat="item in itemList | orderBy:orderIt"
3,多字段排序:
如果单个字段排序不能满足需求,那就要祭出绝活了!orderBy还支持多字段排序,方法如下
ng-repeat="item in itemList | orderBy:[orderIt,'name','-amount']
没错,第一个参数传递数组,可以是自定义函数或字段名,字段名前面加“-”,代表倒排序。
分类:
JavaScript & HTML5
, AngularJs
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· 【译】.NET 升级助手现在支持升级到集中式包管理
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· Tinyfox 发生重大改版