过滤器

  • 多个过滤器可以通过 | 连用,从左向右,上一个过滤成功的结果会继续进行下一次过滤

简单的常用过滤器

  1. uppercase,lowercase 大小写转换
    {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
    {{ "TANK is GOOD" | lowercase }} // 结果:tank is good
  2. number 格式化(保留小数)
    {{149016.1945000 | number:2}}
  3. currency货币格式化
    {{ 250 | currency }} // 结果:$250.00
    {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00
  4. limitTo 截取
    {{"1234567890" | limitTo :6}} // 从前面开始截取6位
    {{"1234567890" | limitTo:-4}} // 从后面开始截取4位

date 日期过滤器

yyyy--表示年份;
MM--月份(必须大写);
dd--日期;
hh--时;
mm--分(必须小写);
ss--秒;
EEEE--星期;
hh:mm--形式是24小时制;
h:mma--12小时制;

  • 日期1
  • 日期2
  • 日期3
  • 日期4
  • 日期1的显示效果:
    2016/11/19 11:59:05 Saturday
    日期2的显示效果:
    2016年11月19日 12:01PM Saturday
    日期3的显示效果:
    2016年11月22日 10时42分09秒
    日期4的显示效果:
    2016/11/22 11:16:58
    

    orderBy 用于数组排序

    参数可以有三种类型:

    1. function函数,会遍历待排序的数组,并将返回的结果进行比较排序。
    2. 字符串,待排序的数组内容应为对象,按每个对象的对应属性值进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。
    3. 数组,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。
    定义function 为:
    $scope.sortSimpleType(op){
         return op;
    }
    

    在页面中的代码为:字符串数组排序

    {{['test','bob','market','type','barrow'] | orderBy: sortSimpleType}}

    排序结果为:

    ["barrow","bob","market","test","type"]
    

    数字数组排序:

    {{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}

    排序结果为:

    [1,1,2,3,6,56,3434,12121]
    

    当然了,参数类型为function的orderBy过滤器,也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。

    定义字符串/数组:
    {{ng-repeat="x in [{'name':'nick','age':34},{'name':'nick','age':23},{'name':'bob','age':23}] | orderBy:[ 'name','age']}}
    //排序结果为: {"name":"bob","age":23} {"name":"nick","age":23} {"name":"nick","age":34}

    filter 过滤数组并返回一个子数组

    参数可以有三种类型:

    1. 字符串或数字,返回含有该字符串或数字的成员组成子数组。
  • {{ webArr | filter : 'n' }}
  • ===> [{"name":"nick","age":25}]
    1. 对象,数组成员应为对象;例如
  • {{ webArr | filter : {name : 'l'} }}
  • ===> [{"name":"ljy","age":28},{"name":"xzl","age":28}]
    1. 函数,遍历数组并返回符合该函数的成员组成子数组
  • {{ webArr | filter : fun }}
  • $scope.fun = function(e){return e.age>25;}; ===> [{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

    此外可以自定义过滤器,但没有必要

    • 自定义的过滤器可以都添加到一个module上,然后将该module注入到每个项目的module中
    姓名: {{ msg | reverse : 10 }} //冒号后的值作为参数传给function中的param1

    你可能感兴趣的:(过滤器)