快捷導(dǎo)航

AngularJS中的過(guò)濾器filter用法完全解析

更新時(shí)間：2016年04月22日 18:00:51 作者：hudeyong926

這篇文章主要介紹了AngularJS中的過(guò)濾器filter用法,包括Angular中一些常用的自帶的過(guò)濾器的列舉以及自定義filter的方法,需要的朋友可以參考下

在AngularJS的世界里，filter提供了一種格式化數(shù)據(jù)的方法，Angular也提供給我們了很多內(nèi)建的過(guò)濾器，并且建立自定義過(guò)濾器也是相當(dāng)?shù)暮?jiǎn)單

在HTML的模板綁定{{}}中，我們使用 | 來(lái)調(diào)用過(guò)濾器，比如，我們想讓字符串全部大寫(xiě)字符顯示：

{{ name | uppercase }}

2016422175829103.jpg (363×121)

當(dāng)然了，我們也可以在JavaScript中使用$filter服務(wù)來(lái)調(diào)用過(guò)濾器，還拿字符串大寫(xiě)來(lái)舉例：

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

如何傳遞參數(shù)到filter呢？只需要把參數(shù)放在filter之后，中間加個(gè)冒號(hào)（如果有多個(gè)參數(shù)要傳遞，在每個(gè)參數(shù)后加上冒號(hào)）比如，數(shù)字過(guò)濾器可以幫助我們限制數(shù)字的位數(shù)，如果想顯示兩位小數(shù)，加上number:2就可以了

{{ 123.456789 | number:2 }}

filter過(guò)濾器主要用來(lái)過(guò)濾一個(gè)數(shù)組數(shù)據(jù)并返回一個(gè)包含子數(shù)組數(shù)據(jù)的新數(shù)組。

比如，在客戶端搜索時(shí)，我們可以快速的從數(shù)組中過(guò)濾出我們想要的結(jié)果。

這個(gè)filter方法接收一個(gè)string，object，或者function參數(shù)用來(lái)選擇/移除數(shù)組元素。

下滿我們具體來(lái)看：

一，內(nèi)置的過(guò)濾器
1，uppercase，lowercase大小轉(zhuǎn)換

{{ "lower cap string" | uppercase }}   //結(jié)果：LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //結(jié)果：tank is good

｜這里的豎線是一種管道功能，如果對(duì)linux比較熟悉的話，這塊的｜根linux的管道功能，基本是一樣的2，json格式化

{{ {foo: "bar", baz: 23} | json }}  //結(jié)果：{ "foo": "bar", "baz": 23 }

注意：bza沒(méi)格式前是沒(méi)有雙引號(hào)的，格式化后就轉(zhuǎn)換成了json數(shù)據(jù)了。

3，date格式化

mysql時(shí)間戳 ng-bind="message.time * 1000 | date:'yyyy-mm-dd'"

{{ 1304375948024 | date:'medium'}}   //May 03, 2011 06:39:08 PM 
{{ 1304375948024 | date }}             //結(jié)果：May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //結(jié)果：05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //結(jié)果：2011-05-03 06:39:08

4，number格式化

{{ 1.234567 | number:1 }}  //結(jié)果：1.2  
{{ 1234567 | number }}    //結(jié)果：1,234,567

5，currency貨幣格式化

{{ 250 | currency }}         //結(jié)果：$250.00  
{{ 250 | currency:"RMB ￥ " }}    //結(jié)果：RMB ￥ 250.00

6，filter查找只能查value,不能查key

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
 
//上例結(jié)果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'ip'} }}  //查找name like ip的行 
//上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}] 
 
$filter('number')(30000, 2); 
var jsonString = $filter('json')({"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}])

7，limitTo字符串，對(duì)像的截取

{{ "i love tank" | limitTo:6 }}      //結(jié)果：i love 
{{ "i love tank" | limitTo:-4 }}     //結(jié)果：tank 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }}   //結(jié)果：[{"age":20,"id":10,"name":"iphone"}]

8，orderBy對(duì)像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根據(jù)id升序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:['-age','name'] }}

二，自定filter功能
filter的自定義方式也很簡(jiǎn)單，使用module的filter方法，返回一個(gè)函數(shù)，該函數(shù)接收輸入值，并返回處理后的結(jié)果。

app.filter('過(guò)濾器名稱',function(){ 
  return function(需要過(guò)濾的對(duì)象,過(guò)濾器參數(shù)1,過(guò)濾器參數(shù)2,...){ 
    //...做一些事情  
    return 處理后的對(duì)象; 
  } 
});

我找了一個(gè)基本angularjs的mvc框架，phonecat，自定義filter也是在這基礎(chǔ)寫(xiě)的，這個(gè)框架挺好用的。
filters.js添加一個(gè)module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
});

html中調(diào)用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //結(jié)果：===== is good

注意：| lowercase |tankreplace管道命令可以有多個(gè)

yourApp.filter('orderObjectBy', function() { 
 return function(items, field, reverse) { 
  var filtered = []; 
  angular.forEach(items, function(item) { 
   filtered.push(item); 
  }); 
  filtered.sort(function (a, b) { 
   return (a[field] > b[field] ? 1 : -1); 
  }); 
  if(reverse) filtered.reverse(); 
  return filtered; 
 }; 
});

該過(guò)濾器將對(duì)象轉(zhuǎn)換成標(biāo)準(zhǔn)的數(shù)組并把它通過(guò)您指定字段排序。您可以使用orderObjectBy過(guò)濾器酷似ORDERBY，包括字段名后一個(gè)布爾值，以指定的順序是否應(yīng)該得到扭轉(zhuǎn)。換句話說(shuō)，假的是升序，真正的下降。html調(diào)用

<li ng-repeat="item in items | orderObjectBy:'color':true">{{ item.color }}</li>

排序搜索

<input type="text" ng-model="search" class="form-control" placeholder="Search"> 
<thead> 
  <tr> 
    <!-- ng-class="{dropup:true}" --> 
    <th ng-click="changeOrder('id')" ng-class="{dropup: order === ''}"> 
      產(chǎn)品編號(hào) 
      <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 
      產(chǎn)品名稱 
      <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 
      產(chǎn)品價(jià)格 
      <span ng-class="{orderColor: orderType === 'price'}" class="caret"></span> 
    </th> 
  </tr> 
</thead> 
<tbody> 
  <tr ng-repeat="item in productData | filter: search | orderBy:order + orderType"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    <td>{{item.price | currency: '￥'}}</td> 
  </tr> 
</tbody>

angularjs

//默認(rèn)排序字段 
$scope.orderType = 'id'; 
 
$scope.order = '-'; 
 
$scope.changeOrder = function(type) { 
  console.log(type); 
  $scope.orderType = type; 
 
  if ($scope.order === '') { 
    $scope.order = '-'; 
  }else{ 
    $scope.order = ''; 
  } 
}

您可能感興趣的文章: