过滤器

过滤器

• 在html中的模版绑定符号｛｛｝｝内通过 | 符号调用过滤器。
• 例如：将字符串转换成大写:

｛｛name | uppercase｝｝

• 在JavaScript中可以通过$filter调用过滤器。例如，在javaScript中使用lowercase过滤器：

app.controller('DemoController',['$scope','$filter',
        function($scope,$filter){
            $scope.name=$filter('lowercase')('Ruouo')
        }])

currency

• currency过滤器将一个数值格式化为货币格式。

date

• 将日期格式化成所需要的格式

  ｛｛today| date:'medium'｝｝//月 日，年 时：分：秒 PM/AM
  

  1. • 年份格式化
       

  ｛｛today| date:'yyyy'｝｝//2017 <br>
  ｛｛today| date:'yy'｝｝//17 <br>
  ｛｛today| date:'y'｝｝//2017</li></ul>
  

• -月份格式化

  ｛｛today| date:'MMM'｝｝//Aug
  ｛｛today| date:'MM'｝｝//08
  

• -日期格式化
  

  ｛｛today| date:'dd'｝｝//09 数字日期 <br>
  ｛｛today| date:'d'｝｝//9 一个月中的第几天 <br>
  ｛｛today| date:'EEE'｝｝//Thu英文星期简写</li>
  

  • -小时格式化
    ｛｛today| date:’HH’｝｝//24小时
    ｛｛today| date:’hh’｝｝//12小时
  • -分钟格式化
    ｛｛today| date:’mm’｝｝//数字分钟数
    ｛｛today| date:’m’｝｝//一个小时的第几分钟
  • -秒数格式化
    ｛｛today| date:’ss’｝｝//数字秒数
  • -字符格式话
    ｛｛today| date:’a’｝｝//上下午标识 AM/PM
  • -自定义日期格式化
    ｛｛today| date:’EEE’,’MMMd’,’y’｝｝//Thu,Aug9,2017

filter

• 该过滤器第一个参数可以是字符串、对象、或是一个用来从数组中选择元素的函数。

  1. • 字符串
       

     返回所有包涵这个字符串的元素。如果返回不包含该字符串的元素，在参数前加！

• • 对象
    

  例子：有一个有people对象组成的数组，每个对象都含有他们最喜欢吃的食物列表，那么可以通过下面的形式进行过滤：

• {{ [{'name':'Ari',
      'city':'Beijing',
      'favorite':'Pizza'
      },
      {'name':'Ari',
      'city':'Beijing',
      'favorite':'apple'
      },
      {'name':'Ari',
      'city':'Beijing',
      'favorite':'orange'
      }
  ]| filter:{'favorite':'Pizza'}}}
  

  1. 
     
  2. • 函数
       

  对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回.
  例如：用过滤器选择所有包涵字母a的单词

  {{['aa','SS','waw','ddaa'] | filter:'a'}}//aa,waw,ddaa
  

  • 第二个参数：
    
    1. • true
         

         用angular.equals(expected,actual)对两个值进行严格比较

    2. • false
         进行区分大小写的字符串比较
    3. • 函数
         运行这个函数，如果返回真值就接受这个元素。

  json

  • json过滤器可以将一个JSON或JavaScript对象转换为字符串。（对调试极有帮助）

  {{ {'name':'Ari','city':'Beijing'}|json }}
  
   结果:{
      "name":"Ari",
      "city":"Beijing"
      }
  

  limitTo

  • limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过参数的正负值来控制从前面还是后面截取。
  • [x] 如果传入参数大于被操作数组或字符串的长度，则全部返回。
    

    例如：

  {{I am a girl | limitTo:3}}
  

  lowercase

  • 将字符串转换为小写

  number

  • 将数字格式化成文本，第二个参数时可选的，用来控制小数点后截取的位数

  orderBy

  • 用表达式对指定的数组进行排序