angularJs中篩選功能-angular.filter-1

技術分享:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angular-filter-learn-1/

以下介紹爲自己在使用angular-filter時,簡單總結的用法。

開始

1.你可以使用4中不同的方法來安裝angular-filter:

2.在包含或Angular本身外,在引用angular-filter.js(或者angular-filter.min.js)在你的項目index.html中;

3.添加‘angular.filter’依賴項;

當你做完這些,你的文件看起來就類似以下:

<!doctype html>
<html ng-app="myApp">
<head>

</head>
<body>
    ...    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
    <script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
    ...    <script>        var myApp = angular.module('myApp', ['angular.filter']);    </script>
    ...</body>
</html>

filter

從數組中選取一個子集,並將其返回成一個新的數組;

用法:

// html中:{{ collection | filter : expression : comparator}}// js中:$filter('filter')(array, expression, comparator)參數:array:想篩選的數組
     expression:用於從數組中篩選的條件
     comparator:用於確定預期值(從篩選器表達式)和實際值(從數組中的對象)中使用的比較器,應視爲匹配。
 
$scope.friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}
]<tr ng-repeat="friendObj in friends | filter:{name:'John'}">
    <td>`friendObj`.`name`</td>
    <td>`friendObj`.`phone`</td>
</tr>
 
<--result
John 555-1276-->

Date 

https://docs.angularjs.org/api/ng/filter/date

將日期篩選爲想要的日期格式;

用法:

// html中:{{ collection | date : format : timezone}}// js中:$filter('date')(date, format, timezone)參數:format爲設置的日期格式,例如:'yyyy-MM-dd'
     timezone被用於格式化時區。 
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
<--result:2010-10-29 11:40:23 +0800-->

Collection

concat

將另外一個對象或者數組拼接到已有的對象或者數組之後;

function MainController ($scope) {
  $scope.array = [ {a: 1}, {a: 2} ];
  $scope.object = {    0: {a: 3},    1: {a: 4}
  };
}<li ng-repeat="elm in array | concat:object">
  {{ elm.a }}</li>

<!--result:1 2 3 4-->

unique

從數組或者對象中移除重複項;

如果提供的是一個字符串,它將用提供的表達式來過濾掉重複使用的。

用法:

//html中:{{collection | unique: 'property'}};//js中:$filter('unique')(collection, 'property'); 參數:collection被篩選的數組或者對象
      property去掉這個屬性中的重複值
function MainController ($scope) {
  $scope.orders = [
    { id:1, customer: { name: 'John', id: 10 } },
    { id:2, customer: { name: 'William', id: 20 } },
    { id:3, customer: { name: 'John', id: 10 } },
    { id:4, customer: { name: 'William', id: 20 } },
    { id:5, customer: { name: 'Clive', id: 30 } }
  ];
}<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
<!-- result:
All customers list:
John 10William 20Clive 30-->

join

將一個數組轉換爲一個字符串;

默認情況下,它將加入元素與一個單一的空間,但是你可以提供自己的分隔符。

用法:

//html中:{{collection | join: ','}};//js中:collection.join(','); 參數:collection 需要轉換的數組,得到用,連接的字符串
 
$scope.names = ['John', 'Sebastian', 'Will', 'James'];<p>{{ names | join:',' }}</p>
<!--result:
John, Sebastian, Will, James--> 
 ps:js中的split()函數可以使用一個字符串中的某一分隔符將其字符串分隔成爲數組。

Math

number

用來精確浮點數;

用法:

//html中:{{ number_expression | number : fractionSize}}//js中:$filter('number')(number, fractionSize)參數:number爲待精確的數字
     fractionSize(可選)爲小數點後精確位數,默認值是3
 
function MainController ($scope) {
  $scope.val=1234.56789;
}<li>{{val | number:2}}</li>
<li>{{val | number}}</li>
 
<-- result:1234.561234.567-->

max/min

用來查找並返回數組中的最大值(最小值);

用法:

html中:{{array|max:optional}}
js中:$filter('max')(array,'optional') 
<p> {{ [1,2,3,4,7,8,9] | max }}</p>
<--result9-->


sum

計算數組中的值;

用法:

html中:{{array|sum:optional}}
js中:$filter('sum')(array,'optional')
 
{{[1,2,3] | sum:10}}<--result16-->

GitHub英文文檔:https://github.com/a8m/angular-filter


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章