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

創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用10余年，服務(wù)更有保障！服務(wù)器租用，雅安電信機(jī)房 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

以下介紹為自己在使用angular-filter時(shí)，簡單總結(jié)的用法。

開始

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

• 克隆或創(chuàng)建這個(gè)存儲庫

• 通過bower：通過在你的終端執(zhí)行：$ bower install angular-filter

• 通過npm：通過在你的終端執(zhí)行：$ npm install angular-filter

• 通過cdnjs：  http://www.cdnjs.com/libraries/angular-filter

2.在包含或Angular本身外，在引用angular-filter.js（或者angular-filter.min.js）在你的項(xiàng)目index.html中；

3.添加‘a(chǎn)ngular.filter’依賴項(xiàng)；

當(dāng)你做完這些，你的文件看起來就類似以下：

    ...    
    
    ...    
    ...

filter

從數(shù)組中選取一個(gè)子集，并將其返回成一個(gè)新的數(shù)組；

用法：

// html中：{{ collection | filter : expression : comparator}}// js中：$filter('filter')(array, expression, comparator)參數(shù)：array：想篩選的數(shù)組
     expression：用于從數(shù)組中篩選的條件
     comparator：用于確定預(yù)期值（從篩選器表達(dá)式）和實(shí)際值（從數(shù)組中的對象）中使用的比較器，應(yīng)視為匹配。
 
$scope.friends = [
{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'}
]
    `friendObj`.`name`
    `friendObj`.`phone`

 
<--result
John 555-1276-->

Date 

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

將日期篩選為想要的日期格式；

用法：

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

Collection

concat

將另外一個(gè)對象或者數(shù)組拼接到已有的對象或者數(shù)組之后；

function MainController ($scope) {
  $scope.array = [ {a: 1}, {a: 2} ];
  $scope.object = {    0: {a: 3},    1: {a: 4}
  };
}
  {{ elm.a }}

unique

從數(shù)組或者對象中移除重復(fù)項(xiàng)；

如果提供的是一個(gè)字符串，它將用提供的表達(dá)式來過濾掉重復(fù)使用的。

用法：

//html中：{{collection | unique: 'property'}}；//js中：$filter('unique')(collection, 'property')； 參數(shù)：collection被篩選的數(shù)組或者對象
      property去掉這個(gè)屬性中的重復(fù)值
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 } }
  ];
}
    {{ order.customer.name }} , {{ order.customer.id }} 

join

將一個(gè)數(shù)組轉(zhuǎn)換為一個(gè)字符串；

默認(rèn)情況下，它將加入元素與一個(gè)單一的空間，但是你可以提供自己的分隔符。

用法：

//html中：{{collection | join: ','}}；//js中：collection.join(',')； 參數(shù)：collection 需要轉(zhuǎn)換的數(shù)組，得到用，連接的字符串
 
$scope.names = ['John', 'Sebastian', 'Will', 'James'];
{{ names | join:',' }}
 
 ps:js中的split()函數(shù)可以使用一個(gè)字符串中的某一分隔符將其字符串分隔成為數(shù)組。

Math

number

用來精確浮點(diǎn)數(shù)；

用法：

//html中：{{ number_expression | number : fractionSize}}//js中：$filter('number')(number, fractionSize)參數(shù)：number為待精確的數(shù)字
     fractionSize（可選）為小數(shù)點(diǎn)后精確位數(shù)，默認(rèn)值是3
 
function MainController ($scope) {
  $scope.val=1234.56789;
}
{{val | number:2}}
{{val | number}}
 
<-- result:1234.561234.567-->

max/min

用來查找并返回?cái)?shù)組中的大值(最小值)；

用法：

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

sum

計(jì)算數(shù)組中的值；

用法：

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

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

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

網(wǎng)頁名稱：angularJs中篩選功能-angular.filter-1-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/dpehsj.html