【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'}]
    }

  }
})();