AngularJS 从入门到精通(过滤器(Filter) )
来源:互联网 发布:控制仿真类软件 编辑:程序博客网 时间:2024/06/15 10:45
过滤器(Filter),故名思议,源数据通过特定的规则,转换成需要的数据格式, 这个规则,我们统称为过滤器。
AngularJs 的Filter 功能非常强大,并且使用方便。它能够使得页面分组,查询,排序,以及数据转换等操作变的异常简单,同时还可以自定义过滤器实现更复杂的功能。
格式:{{expression | filter}} 或 {{expression | filter1 | filter2 | filter3......}} 或者 {{ expression | filter:argument1:argument2:... }}
常用内置Filter :
- currency: 货币符号格式化,默认是美元符号$,可以自定义人民币符号¥等, 用法如下:
- {{100 | currency:'¥'}}
- uppercase/lowercase 字符串大写/小写转换
- <span style="font-size: 10px;">{{"Angularjs" | uppercase}}</span>
- data: 日起格式化
- {{date | date : 'yyyy-MM-dd hh:mm:ss'}}
- limitTo 限制数组或字符串长度
- {{ array | limitTo : 2 }}
- {{ "Angularjs" | limitTo : 2 }}
- number 数字格式化
- {{ "123.45678"| number : 2 }}
- orderBy: 将数组元素按照指定的元素进行排序,同时可以指定按照升序或者降序排序,若不指定,默认为升序排序。
- <ui ng-repeat="person in persons | orderBy:name">
- <li>{{person.name}}</li>
- <li>{{person.age}}</li>
- </ui>
orderBy:'-name'
- filter
自定义Filter:
filter的自定义方式使用module的filter方法,返回一个函数,该函数接收输入值,并返回处理后的结果。下面例子是定义一个过滤器,它可以返回一个数组中下标为奇数的元素,代码如下:
app.filter('odditems',function(){ return function(inputArray){ var array = []; for(var i=0;i<inputArray.length;i++){ if(i%2!==0){ array.push(inputArray[i]); } } return array; }});
格式就是这样,你的处理逻辑就写在内部的那个闭包函数中。你也可以让自己的过滤器接收参数,参数就定义在return的那个函数中,作为第二个参数,或者更多个参数也可以。
0 0
- AngularJS 从入门到精通(一 过滤器 Filter)
- AngularJS 从入门到精通(过滤器(Filter) )
- JAVA WEB从入门到精通 day21 过滤器Filter
- AngularJS 从入门到精通(一 指令)
- AngularJs 过滤器(filter)
- AngularJs过滤器(filter)
- AngularJs 过滤器(filter)
- AngularJs(七) 过滤器(filter)
- 走进AngularJs 过滤器(filter)
- AngularJs 之过滤器($filter)
- 阅读《Android 从入门到精通》(34)——Intent Filter
- 从入门到精通
- 过滤器(filter)入门
- C/C++从入门到精通(入门、进阶、精通)
- C/C++从入门到精通(入门、进阶、精通)
- C/C++从入门到精通(入门、进阶、精通)
- Google从入门到精通(转载)
- (转帖)java从入门到精通
- 【Java并发编程实战】—–“J.U.C”:ReentrantLock之二lock方法分析
- hdu 3624 City Planning(暴力,也可扫描线)
- 设计模式-桥接模式
- 高斯-塞得尔迭代法
- [转]svn: E200030: sqlite[S11]: database disk image is malformed
- AngularJS 从入门到精通(过滤器(Filter) )
- 2013阿里巴巴安全工程师笔试试题_复习使用
- 分享干货 码农必备各种API20
- PHP设计模式之组合模式
- HDU 1814 Peaceful Commission (2-SAT)
- 统计学方法与数据分析学习笔记1
- gdb调试命令
- java序列化的机制和原理
- Java中super的使用