【Angular1】$filter的使用

AngularJS 过滤器 

1. 在模板中使用filter

我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：

{{ expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入（怪不得这货长的跟管道一个样。。）

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数，参数用 : 进行分割，如下：

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

<span ng-repeat="a in array | filter "></span>

代码和html结果样式如下： 

  <table class="table table-bordered">
    <tr><td>过滤器</td><td>功能</td><td>原始数据</td><td>过滤后的数据</td></tr>
    <tr><td>uppercase</td><td>大小写转换</td><td>dream</td><td>{{ "dream" | uppercase }}</td></tr>
    <tr><td>lowercase</td><td>大小写转换</td><td>XIONG</td><td>{{ "XIONG" | lowercase }}</td></tr>
    <tr><td>date</td><td>日期格式化</td><td>1490161945000</td><td>{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}</td></tr>
    <tr><td>number</td><td>保留小数</td><td>3.14159</td><td>{{3.14159 | number:2}}</td></tr>
    <tr><td>currency</td><td>货币格式化</td><td>666</td><td>{{666 | currency:"￥" }}</td></tr>
    <tr><td>limitTo</td><td>截取</td><td>1234567890</td><td>{{"1234567890" | limitTo:-4}}</td></tr>
    <tr><td>orderBy</td><td>排序</td><td>根id降序排</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
      {"id": 1,"age": 12,"name": "android"},
      {"id": 50,"age": 44,"name": "win"}
      ] | orderBy:'-id' }}</td></tr>
    <tr><td>orderBy</td><td>排序</td><td>根据id升序排</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
      {"id": 1,"age": 12,"name": "android"},
      {"id": 50,"age": 44,"name": "win"}
      ] | orderBy:'id' }}</td></tr>
    <tr><td>filter</td><td>查找</td><td>查找name为iphone的行</td><td>{{ [{"id": 100,"age": 20,"name": "iphone"},
      {"id": 1,"age": 12,"name": "android"},
      {"id": 50,"age": 44,"name": "win"}
      ] | filter:{'name':'iphone'} }}</td></tr>
  </table>

过滤器	功能	原始数据	过滤后的数据
uppercase	大小写转换	dream	DREAM
lowercase	大小写转换	XIONG	xiong
date	日期格式化	1490161945000	2017-03-22 13:52:25
number	保留小数	3.14159	3.14
currency	货币格式化	666	￥666.00
limitTo	截取	1234567890	7890
orderBy	排序	根id降序排	[{"id":100,"age":20,"name":"iphone"},{"id":50,"age":44,"name":"win"},{"id":1,"age":12,"name":"android"}]
orderBy	排序	根据id升序排	[{"id":1,"age":12,"name":"android"},{"id":50,"age":44,"name":"win"},{"id":100,"age":20,"name":"iphone"}]
filter	查找	查找name为iphone的行	[{"id":100,"age":20,"name":"iphone"}]

2.在controller或service中使用filter

我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中（service中）使用currency过滤器，只需将它注入到该controller中（service中）即可，代码如下：

此时你可能会有疑惑，如果我要在controller中使用多个filter，难道要一个一个注入吗，这岂不太费劲了？

莫着急~ng提供了一个filter服务可以来调用所需的filter，可以达到同样的效果，使用方法如下：

(function () {
  'use strict';
  angular
    .module('app.user')
    .controller('TestFilterCtrl', TestFilterCtrl);

  TestFilterCtrl.$inject = ['$filter', 'currencyFilter'];

  /* @ngInject */
  function TestFilterCtrl($filter, currencyFilter) {
    activate();

    ////////////////////////////////
    function activate() {
      console.log('单独调用过滤器',currencyFilter(666));//¥666.00

      var array = [{'id': 100, 'age': 20, 'name': 'iphone'}, {'id': 1, 'age': 12, 'name': 'android'}, {'id': 50,'age': 44, 'name': 'win'}];
      console.log('过滤器      功能        原始数据             ', '过滤后的数据');
      console.log('uppercase  大小写转换   dream              ', $filter('uppercase')('dream'));
      console.log('lowercase  大小写转换   XIONG              ', $filter('lowercase')('XIONG'));
      console.log('date       日期格式化   152829213500     	', $filter('date')(1528292135000, 'yyyy-MM-dd HH:mm:ss'));
      console.log('date       日期格式化   2019.05.08         ', $filter('date')(new Date('2019.05.08'), 'yyyy-MM-dd HH:mm:ss'));
      console.log('number     保留小数     3.14159            ', $filter('number')(3.14159, 2));
      console.log('currency   货币格式化   666                ', $filter('currency')(666, '￥'));
      console.log('limitTo    截取        1234567890         ', $filter('limitTo')(1234567890, 6));
      console.log('orderBy    排序        根id降序排           ', $filter('orderBy')(array, '-id'));
      console.log('orderBy    排序        根据id升序排          ', $filter('orderBy')(array, 'id'));
      console.log('filter     查找        查找name为iphone的行  ', $filter('filter')(array, {'name': 'iphone'}));
                 //过滤器      功能        原始数据              过滤后的数据
                 //uppercase  大小写转换   dream               DREAM
                 //lowercase  大小写转换   XIONG               xiong
                 //date       日期格式化   152829213500     	  2018-06-06 21:35:35
                 //date       日期格式化   2019.05.08          2019-05-08 00:00:00
                 //number     保留小数     3.14159             3.14
                 //currency   货币格式化   666                 ￥666.00
                 //limitTo    截取        1234567890          123456
                 //orderBy    排序        根id降序排            [{'id': 100…}, {'id': 50…}, {'id': 1…}]
                 //orderBy    排序        根据id升序排           [{'id': 1…}, {'id': 50…}, {'id': 100…}]
                 //filter     查找        查找name为iphone的行   [{'id':100,'age':20,'name':'iphone'}]
    }

  }
})();