AngularJS中的過濾器filter怎么使用

這篇文章主要介紹“AngularJS中的過濾器filter怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“AngularJS中的過濾器filter怎么使用”文章能幫助大家解決問題。

在AngularJS的世界里，filter提供了一種格式化數據的方法，Angular也提供給我們了很多內建的過濾器，并且建立自定義過濾器也是相當的簡單

在HTML的模板綁定{{}}中，我們使用 | 來調用過濾器，比如，我們想讓字符串全部大寫字符顯示：

{{ name | uppercase }}

當然了，我們也可以在JavaScript中使用$filter服務來調用過濾器，還拿字符串大寫來舉例：

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

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

{{ 123.456789 | number:2 }}

filter過濾器主要用來過濾一個數組數據并返回一個包含子數組數據的新數組。

比如，在客戶端搜索時，我們可以快速的從數組中過濾出我們想要的結果。

這個filter方法接收一個string，object，或者function參數用來選擇/移除數組元素。

下滿我們具體來看：

一，內置的過濾器
1，uppercase，lowercase大小轉換

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

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

{{ {foo: "bar", baz: 23} | json }}  //結果：{ "foo": "bar", "baz": 23 }

注意：bza沒格式前是沒有雙引號的，格式化后就轉換成了json數據了。

3，date格式化

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

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

 4，number格式化

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

 5，currency貨幣格式化

{{ 250 | currency }}         //結果：$250.00  
{{ 250 | currency:"RMB ￥ " }}    //結果：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的行 
 
//上例結果：[{"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的行 
//上例結果:[{"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字符串，對像的截取

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

 8，orderBy對像排序

{{ [{"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' }}      //根據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的自定義方式也很簡單，使用module的filter方法，返回一個函數，該函數接收輸入值，并返回處理后的結果。

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

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

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

html中調用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //結果：===== is good

 注意：| lowercase |tankreplace管道命令可以有多個

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; 
 }; 
});

該過濾器將對象轉換成標準的數組并把它通過您指定字段排序。您可以使用orderObjectBy過濾器酷似ORDERBY，包括字段名后一個布爾值，以指定的順序是否應該得到扭轉。換句話說，假的是升序，真正的下降。html調用

<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 === ''}"> 
      產品編號 
      <span ng-class="{orderColor: orderType === 'id'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('name')" ng-class="{dropup: order === ''}"> 
      產品名稱 
      <span ng-class="{orderColor: orderType === 'name'}" class="caret"></span> 
    </th> 
    <th ng-click="changeOrder('price')" ng-class="{dropup: order === ''}"> 
      產品價格 
      <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

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

關于“AngularJS中的過濾器filter怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。