AngularJs过滤器

内置过滤器json

一、currency(货币处理)数组

  currency能够将数字格式转化为货币的形式,若是不传参数,默认为$。函数

1 {{num|currency:"¥"}}

  展示的形式为¥xxx。spa

二、date(日期格式化)调试

  angular中提供的date过滤器可以知足通常的时间格式要求。code

{{date|date:'y-m-d h:m:s EEEE'}}

  展示形式为:年-月-日 时:分:秒 星期,它们之间的格式能够自由组合,脱离了原生js中的单调和复杂性。对象

三、filter(匹配字符串)blog

  filter用来处理数组,而后能够挑选出含有的所选中的子串元素,做为子数组来返回。能够是字符串数组,也能够是对象数组。若是是对象数组,能够匹配属性的值,它接受一个参数,来定义子串的规则。排序

1 $scope.arr = ["Monday","Tuesday","星期三","星期四","周五","周六"];
1 <li>{{arr|filter:'d'}}</li>
2 <li>{{arr|filter:'周'}}</li>

  它能选出数组中含有字母“d”、含有汉子“周”的元素,而后分别以数组的形式返回。ip

四、json(格式化json对象)

  json过滤器能够把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,官网说它 能够用来进行调试,嗯,是个不错的选择。或者,也能够用在js中使用,做用就和咱们熟悉的JSON.stringify()同样。

1 {{ jsonTest | json}}

五、limitTo(限制数组长度或字符串长度)

  limitTo过滤器用来截取数组或者字符串的长度,接收一个参数用来指定要截取的数组或者字符串的长度,若是值为负数,那么就从数组或者字符串的尾部开始截取。

1 <li>{{arr|limitTo:'3'}}</li>

  它会截取数组arr的前三位,而后以数组的形式返回。

六、lowercase(小写格式)

  把英文字母所有转化成小写的形式,也没有太大的用处。没有参数。

<li>{{da|lowercase}}</li>

  这里只能转换英文,遇到其余的则不转换。

七、uppercase(大写格式)

  这个的写法跟lowercase相同。

八、number(格式化数字)

  number过滤器能够为一串数字进行分位,至关于千位分割符,如:123,456,789。能够接收一个参数,指定float类型保留几位小数。

<li>{{num|number:2}}</li>

  这个就表示保留小数点后两位。

九、orderBy(排序)

  orderBy过滤器能够将数组中的元素进行排序,接收一个参数指定排序的规则,参数能够是字符串,表示以这个属性名称进行排序;能够是一个函数,定义排序属性;能够是一个数组,表示依次按数组的属性值进行排序。

1 $scope.err = [
2             {name : 'jack',age : 30},
3             {name : 'mack',age : 24},
4             {name : 'sunny',age : 28},
5             {name : 'jim',age : 20},
6             ]
1 <li>{{err|orderBy:'age':true}}</li>

  这个就是以age的从大到小进行排序。

自定义过滤器

 1 <div ng-controller = 'con'>
 2         <div>{{msg|prz}}</div>
 3     </div>
 4     <script src="public/libs/angular/angular.min.js"></script>
 5     <script>
 6         var App = angular.module('App',[]);
 7         App.controller('con',['$scope',function($scope){
 8             $scope.msg = 'you can kill';
 9         }])
10         App.filter('prz',function(){
11             return function(z){
12                 return z[0].toUpperCase()+z.slice(1); 
13             }
14         })
15     </script>

  上面代码表示,自定义一个首字母大写的过滤器。

相关文章
相关标签/搜索