美文网首页
angularjs过滤器

angularjs过滤器

作者: 杨杨1314 | 来源:发表于2017-03-07 16:07 被阅读38次

    过滤器(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,

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

    相关文章

      网友评论

          本文标题:angularjs过滤器

          本文链接:https://www.haomeiwen.com/subject/doymgttx.html