angularjs过滤器

2017-03-07  本文已影响38人  杨杨1314

过滤器(filter),作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。ng内置了一些过滤器,它们是:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。除此之外,还可以自定义过滤器。

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

一:在模板中可以使用过滤器


这相当于在input框输入的时候进行匹配搜索


多个过滤器用管道字符隔开

二:在js代码中也可以使用过滤器,方式就是在controller中注入服务:$filter

$filter

三:ng的内置过滤器

1:currency:货币过滤器前的符号是可以自己定义的,默认是$,例如:

{{item.money|currency:'¥'}}

2:date:日期格式化

{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}} 

获取今天的时间就是:

var today = new Date();

$scope.formatDate =  $filter('date)(today, 'yyyy-MM-dd HH:mm:ss');

获得:2017-03-07 15:25:26

3:filter 过滤,返回一个数组或者对象数组

{{people|filter:'zhangsan'}} 过滤数组里带有zhangsan的,

返回:[{"age":"12","name":"zhangsan","money":"2300"}]

4:json 格式化json对象,相当于在页面上输出一个json串

{{ jsonTest | json}}

5:limitTo 限制数组长度或者字符串长度

{{'123456' | limitTo:3}} 返回:123

6:uppercase 字符串转大写

{{'zhansan' | uppercase}} 返回:ZHANGSAN

7:lowercase 字符串转小写 ,同上

8:number 过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数

{{'987800' | number :2}} 返回:987,800.00

9:orderBy 排序

{{ childrenArray | orderBy : 'age' }} 按照age进行排序

{{ childrenArray | orderBy : ['age','name'] }} 按照age排序,如果age相同,则按照name进行排序

四:自定义过滤器,顾名思义,自己定义的过滤器,用它来对某个输入按照一定的规则进行处理。

写了一个例子,是把字符串用“,”分开,如下:

todoApp.controller('myCon',function($scope,$filter){

$scope.names = 'liujingxia';

});

自定义过滤器为:

页面上需要调用自定义过滤器:

name:{{names | reverse}}

最后返回:name:l,i,u,j,i,n,g,x,i,a,

大概的能明白自定义过滤器,但是还不太理解他的用处。欢迎指正。

上一篇下一篇

猜你喜欢

热点阅读