AngularJs filter 過濾器基礎【轉】

Filter

Ng裏的過濾器。

 

currency：把一個數字格式化成貨幣模式（如$1,234.56）。當沒有提供任何貨幣符號時，默認使用當前區域的符號。

使用：

HTML：{{ currency_expression | currency:symbol:fractionSize}}

JS：$filter(「currency」)(amount,symbol,fractionSize);

amount：數值，過濾的值。

symbol：字符串，要顯示的貨幣符號或標識符。

fractionSize：數值，整數的小數位數，默認爲當前的最大位數。

 

date：基於須要的格式將時間格式化成字符串。

使用：

HTML：{{date_expression | date:format:timezone}}

JS：$filter(「date」)(date,format,timezone);

date：格式化爲日期的日期對象。若是沒有指定輸入的時區字符串，時間則是當地時間。

format：格式規則/格式。

timezone：時區。

 

filter：從數組中選出一個子集，並將其做爲一個新數組返回。

使用：

HTML：{{filter_expression | filter:expression:comparator}}

JS：$filter(「filter」)(array,expression,comparator);

array：被過濾的數組。

expression：字符串/對象/函數，用於從數組中選擇數據的判斷表達式。使用$能夠匹配任何字段。

comparator：函數/Boolean/undefined，用於肯定預期的值（從filter表達式返回）和實際的值（數組中的對象）進行比較，應視爲匹配。function(actual,expected);

 

json：容許將一個javascript對象轉換爲json字符串。

使用：

HTML：{{json_expression | json:spacing}}

JS：$filter(「json」)(object,spacing);

object：過濾的對象。

spacing：每一個縮進的空格數，默認爲2。

 

limitTo：建立一個只包含指定數目元素的數組或字符串。元素是按指定的值和符號（+或-）從數組、字符串或數字的開頭或結尾獲取的。若是輸入一個數字，則轉換爲字符串。

使用：

HTML：{{limitTo_expression | limitTo:limit:begin}}

JS：$filter(「limitTo」)(input,limit,begin);

input：限制的數組，字符串，數字。

limit：限制的長度。

begin：限制長度開始的位置（根據索引）。

 

lowercase：將字符串轉換爲小寫。

使用：

HTML：{{lowercase_expression | lowercase}}

JS：$filter(「lowercase」)(input);

Input：過濾的字符串。

 

number：將數值轉換爲文本。

若是輸入是null或undefined，那麼其將被返回。若是輸入的是無窮（正無窮/負無窮），將會返回無窮大的符號「∞」。若是輸入不是一個數字，返回一個空字符串。

使用：

HTML：{{number_expression | number:fractionSize}}

JS：$filter(「number」)(number,fractionSize);

number：轉換的數值。

fractionSize：數值，整數的小數位數，默認爲當前的最大位數。在默認的區域設置的狀況下這個數值是3。

 

orderBy：經過判斷表達式將指定的數組進行排序。它是按字符串的字母順序和數值的數字排序的。

注意：若是你發現數字沒有按預期排序，請確保它們其實是被保存爲數字而不是字符串。

使用：

HTML：{{orderBy_expression | orderBy:expression:reverse}}

JS：$filter(「orderBy」)(array,expression,reverse);

array：排序的數組。

expression：字符串/函數/數組，用來肯定元素順序的表達式。

reverse：boolean，顛倒數組的順序。默認爲false。

 

uppercase：將字符串轉換爲大寫。

使用：

HTML：{{uppercase_expression |uppercase}}

JS：$filter(「uppercase」)(input);

Input：過濾的字符串。

 

自帶filter使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
     <!-- HTML: {{ctrl.currencyValue | currency:"USD$":1}} -->
     {{ctrl.currencyValue}}
     <!-- HTML: {{ctrl.dateValue | date:"yyyy-MM-dd"}} -->
     {{ctrl.dateValue}}
     <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:'2')">{{i}}</div> -->
     <div ng-repeat="i in ctrl.newArr">{{i}}</div>
     <!-- HTML: <div ng-repeat="i in newArr = (ctrl.arr | filter:{check:true})">{{i}}</div> -->
     <div ng-repeat="i in ctrl._newArr">{{i}}</div>
     {{ctrl.obj | json}}
     <!-- HTML: <div ng-repeat="i in ctrl.arr | limitTo:3:2">{{i}}</div> -->
     <div ng-repeat="i in ctrl.secondNewArr">{{i}}</div>
     <!-- HTML: {{ctrl.str | lowercase}} -->
     {{ctrl.str}}
     <!-- HTML: <div ng-repeat="i in ctrl.arr | orderBy:'name':true">{{i}}</div> -->
     <div ng-repeat="i in ctrl.thirdNewArr">{{i}}</div>
     <!-- HTML: {{ctrl.str | uppercase}} -->
     {{ctrl.newStr}}
  </div>

(function () {
    angular.module("Demo", [])
    .controller("testCtrl", ["$filter",testCtrl]);
    function testCtrl($filter) {
        this.currencyValue = 1234.56;
        this.currencyValue = $filter("currency")(this.currencyValue,"USD$",1);
        this.dateValue = new Date();
        this.dateValue = $filter("date")(this.dateValue,"yyyy-MM-dd");
        this.arr = [{name:'John', phone:'555-1276',check:true},
                {name:'Mary', phone:'800-BIG-MARY',check:false},
                {name:'Mike', phone:'555-4321',check:true},
                {name:'Adam', phone:'555-5678',check:true},
                {name:'Julie', phone:'555-8765',check:false},
                {name:'Juliette', phone:'555-5678',check:true}];
        this.newArr = $filter("filter")(this.arr,"2");
        this._newArr = $filter("filter")(this.arr,{check:true});
        this.obj = {"name":"beast","age":21};
        this.secondNewArr = $filter("limitTo")(this.arr,3,2);
        this.str = "Hello World";
        this.str = $filter("lowercase")(this.str);
        this.thirdNewArr = $filter("orderBy")(this.arr,"name",true);
        this.newStr = $filter("uppercase")(this.str);
    };
  }());

 

自定義filter

基本代碼：

  angular.module(「x」,[]).filter(「filterName」,[「dependancy」,function(dependancy){
       return function(value){
       　　//your code   return the data which passed filter（返回過濾後的數據）
　　};
  }]);

filterName：過濾器名稱。

dependency：注入的服務。

value：須要過濾的數據。

自定義filter使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
    <div ng-repeat="i in newArr=(ctrl.arr | myFilter)">
       {{i.value}}
    </div>
  </div>

  (function () {
    angular.module("Demo", [])
    .filter("myFilter",myFilter)
    .controller("testCtrl", ["$filter",testCtrl]);
    function myFilter(){
       return function(value){
          var arr = [];
          angular.forEach(value,function(item,index){
              if(item.value.indexOf("this")>=0){
                  arr.push(item);
              }
          });
          return arr;
      }
    };
    function testCtrl($filter) {
        this.arr = [{"value":"this is a."},{"value":"that is b."},{"value":"this is c."},{"value":"that is a."}];
    };
  }());

這裏對數組arr進行過濾，把數組中對象value屬性的值含有」this「文本的對象都放進個新數組並返回該數組。

 

轉自http://www.cnblogs.com/ys-ys/p/5006951.html