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,倒排序
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']
没错,第一个参数传递数组,可以是自定义函数或字段名,字段名前面加“-”,代表倒排序。
AngularJS orderBy 使用要点的更多相关文章
- [AngularJS]ng-repeat指令要点
ng-repeat指令要点 1,基本格式,这里不作过多说明,需要的话查看文档 <div ng-repeat="item in someCollection [| someFilter: ...
- AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- 关于angularjs的orderby排序
包子君又来了,,,angularjs有一个非常强大的功能,那就是排序啦,其实也是算filter的一部分呢,包子刚刚做了一个排序,是按照公司的部门的数字大小排列的 由于后台没传来标识,所以我前台自己截图 ...
- [学习笔记] 七步从AngularJS菜鸟到专家(7):Routing [转]
这是"AngularJS – 七步从菜鸟到专家"系列的第七篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.在第四.五篇我们讨论了Angular内建的directives,上一篇了解 ...
- AngularJS是为了克服HTML在构建应用上的不足而设计的
AngularJS中文网:http://www.apjs.net/ 简介 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构 ...
- 二识angularJS
前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为 ...
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- 混合式框架-AngularJS
简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门非常好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也能够认 ...
随机推荐
- C# 裁剪图片
/// <summary> /// 生成缩略图 /// </summary> /// <param name="originalImagePath"& ...
- 修改zerolog使log输出的文件名可以在goland里自动定位--技巧
如何自动定位文件 最近发现goland会自动识别输出的文件或者url,但是有时候又识别不出来,折腾了一下,发现原来要求文件路径或url两边要有空格 改造zerolog 既然如此,那么让我们来改造一下z ...
- AutoLayout——何为intrinsic content size
上一篇说到了约束就是等式和不等式.仅仅知道其原理还是没法拉出符合需求的线.所以这一篇主要看来什么是intrinsic content size,以及它有什么用. 在Xcode中,差点儿全部控件或视图, ...
- ResponderChain note
http://ww3.sinaimg.cn/large/6b288462gw1evl4h40tfxj20sg0lc77k.jpg
- REST接口调用经验
1. 调用接口的时候对于参数或返回值的单位一定要注意啊,比如有的分数用的百分制,有的用的小数...,坑大了
- TCP/IP协议层
除了少数外,OSI协议簇本身已经成为Internet历史早期的遗留产物.当前OSI协议对于网络技术的贡献看来主要是对学习网络的学生讲述模块化的协议簇时,可以引用它的参考模型进行说明等的有限用途. 下面 ...
- [转]Linux 命令行快捷键
群里有人问"问个问题,Linux 命令行有没有快捷键一下从行末会到行头?经常敲了很多命令发现忘加 sudo 了,然后把命令删了重新敲一遍". 自己还真不知道怎么操作,只知道历史命令 ...
- Matlab基本用法
转至:http://blog.sina.com.cn/s/blog_8354dda801012dyn.html 目录: 一.说明 二.数据类型及基本输入输出 三.流程控制 四.循环 五.数组.数组运算 ...
- CodeWarrior WarningC12056
C12056:SP debug info incorrect because of optimization or inline assemble 该warning是代码最优化时(common cod ...
- Python 匿名参数
#-*- coding:utf-8 -*- #匿名函数 #匿名函数语法格式 ''' 变量 = lambda 参数列表:表达式 ''' func = lambda x,y:x+y a = func(2, ...