AngularJs过滤器
angularjs的内置过滤器:
一个过滤器不带参数: {{expression | filter}}
一个过滤器带参数:{{expression | filter:arguments}}
一个过滤器,带多个参数:{{expression | filter: arg1:arg2: ···}}
多个过滤器不带参数: {{expression | filter1 | filter2 | ···}}
1、filter
var childArray = [{name: 'Kimi', age: 3}, {name: 'cindy', age: 4}]; {{childArray | filter: 'a'}} //匹配属性值中含有字符'a'的 {{childArray | filter: 4}} //匹配属性值中含有4的 {{childArray | filter: {name: 'i'}}} //匹配name属性值中含有字符'i'的 {{childArray | filter: func}} //根据过滤函数,指定返回age>4的 func = function(child){ return child.age > 4; }
2、orderBy
{{childArray | orderBy: 'age'}} //按age属性值进行排序,若-age则倒序 {{childArray | orderBy: ['age', 'name']}} //先按age排序,age相同按name排序 {{childeArray | orderBy: orderFunc }} //按函数返回值进行排序
3、lowercase、uppercase
{{ 'MyString' | lowercase}} //小写 {{'MyString' | uppercase}} //大写
4、number
{{ 123.5678 | number: 3}} //精确到小数点后3位 js: $filter('number')(123.5678, 3) //精确到小数点后3位,第二个参数可选,表示小数点后精确位数,默认值3
5、limitTo
<div ng-repeat=' value in values | limitTo:6 '> //限制数组长度或字符串长度,若为负值,从数组尾部截取
6、date
{{date_expression | date: 'yyyy-MM-dd hh:mm:ss EEEE'}} js: var today = new Date(); $filter('date')(tody, 'yyyy-MM-dd HH:mm:ss')
7、currency
{{ 12 | currency}} <!--将12格式化为货币,默认单位符号为 '$', 小数默认2位--> 2 3 {{ 12.45 | currency:'¥'}} <!--将12.45格式化为货币,使用自定义单位符号为 '¥', 小数默认2位--> 4 5 {{ 12.45 | currency:'CHY¥':1}} <!--将12.45格式化为货币,使用自定义单位符号为 'CHY¥', 小数指定1位, 会执行四舍五入操作 --> 6 7 {{ 12.55 | currency:undefined:0}} <!--将12.55格式化为货币, 不改变单位符号, 小数部分将四舍五入 -->
8、json
{{jsonTest | json}}
9、percent
{{width | percent: 1}} //百分比