簡(jiǎn)介
????????上一節(jié)講了5種過濾器,這一節(jié)我們把剩下的三種過濾器講完,分別是orderBy享甸,limitTo徒溪,filter。
過濾器
? ??????orderBy:通過表達(dá)式對(duì)指定的數(shù)組進(jìn)行排序趣些。
????????limitTo:根據(jù)傳入?yún)?shù)生成一個(gè)新的數(shù)組或字符串仿荆,可接受負(fù)值。
????????filter:根據(jù)傳入的參數(shù)給定數(shù)組中選擇一個(gè)子集坏平,并生成一個(gè)新的數(shù)組?拢操。 ? ? ? ? ? ? ??
例子
首先我們有個(gè)數(shù)組:items = [{name:"蘋果",price:7999},{name:"三星",price:6568},{name:"黑莓",price:4000}]
<ul>
? ? <li ng-repeat="item in items">{{item.name}}--{{item.price}}</li>
</ul>
沒有過濾器輸出
1.orderBy:通過表達(dá)式對(duì)指定的數(shù)組進(jìn)行排序
? ? <ul>
? ? ? ? <li ng-repeat="item in items | orderBy:'price'">{{item.name}}--{{item.price}}</li>
????</ul>
orderBy過濾器輸出
跟正常輸出對(duì)比orderBy按照價(jià)格生序輸出,由此可見默認(rèn)是生序(false)
<ul>
? ? <li ng-repeat="item in items | orderBy:'price':true">{{item.name}}--{{item.price}}</li>
</ul>
如果為true功茴,那么會(huì)根據(jù)價(jià)格將序排列
2.limitTo:根據(jù)傳入?yún)?shù)生成一個(gè)新的數(shù)組或字符串庐冯,可接受負(fù)值
<ul>
? ? <li ng-repeat="item in items |?limitTo:2">{{item.name}}--{{item.price}}</li>
</ul>
limitTo過濾器輸出
只輸出了前兩項(xiàng),說明limitTo控制了返回對(duì)象個(gè)數(shù)坎穿,如果是-2展父,那么會(huì)返回倒數(shù)兩個(gè)
3.filter:根據(jù)傳入的參數(shù)給定數(shù)組中選擇一個(gè)子集,并生成一個(gè)新的數(shù)組
<ul>
? ? <li ng-repeat="item in items | filter:'蘋'"></li>
</ul>
filter過濾器輸出
filter會(huì)根據(jù)字段檢索出所有符合條件的內(nèi)容玲昧。
? ??????????????????????????????????????????????????????不積跬步無以至千里,不積小流無以成江海