AngularJs 七 過濾器(filter)

2021-07-10 05:24:00 字數 3029 閱讀 3842

過濾器(filter)正如其名,作用就是接收乙個輸入,通過某個規則進行處理,然後返回處理後的結果。主要用在資料的格式化上,例如獲取乙個陣列中的子集,對陣列中的元素進行排序等。ng內建了一些過濾器,它們是:currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json物件)、limitto(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字)、orderby(排序)。總共九種。除此之外還可以自定義過濾器,這個就強大了,可以滿足任何要求的資料處理。

過濾器的內容非常簡單,只要明白了內建的如何使用,自己如何定義乙個filter就ok了~今天系統的學習了下,下面做個介紹。

我們可以直接在}中使用filter,跟在表示式後面用 | 分割,語法如下:

}

也可以多個filter連用,上乙個filter的輸出將作為下乙個filter的輸入(怪不得這貨長的跟管道乙個樣。。)

}

filter可以接收引數,引數用 : 進行分割,如下:

}

除了對}中的資料進行格式化,我們還可以在指令中使用filter,例如先對陣列array進行過濾處理,然後再迴圈輸出:

ng-repeat="a in array | filter ">

我們的js**中也可以使用過濾器,方式就是我們熟悉的依賴注入,例如我要在controller中使用currency過濾器,只需將它注入到該controller中即可,**如下:

($scope,currencyfilter)

在模板中使用}就可以直接輸出 $123,534.00了!在服務中使用filter也是同樣的道理。

此時你可能會有疑惑,如果我要在controller中使用多個filter,難道要乙個乙個注入嗎,這豈不太費勁了?小兄弟莫著急~ng提供了乙個$filter服務可以來呼叫所需的filter,你只需注入乙個$filter就夠了,使用方法如下:

($scope,$filter)

可以達到同樣的效果。好處是你可以方便使用不同的filter了。

ng內建了九種過濾器,使用方法都非常簡單,看文件即懂。不過為了以後不去翻它的文件,我在這裡還是做乙個詳細的記錄。

使用currency可以將數字格式化為貨幣,預設是美元符號,你可以自己傳入所需的符號,例如我傳入人民幣:

}

原生的js對日期的格式化能力有限,ng提供的date過濾器基本可以滿足一般的格式化要求。用法如下:

}

引數用來指定所要的格式,y m d h m s e 分別表示 年 月 日 時 分 秒 星期,你可以自由組合它們。也可以使用不同的個數來限制格式化的位數。另外引數也可以使用特定的描述性字串,例如「shorttime」將會把時間格式為 12:05 pm這樣的。ng提供了八種描述性的字串,個人覺得這些有點多餘,我完全可以根據自己的意願組合出想要的格式,不願意去記這麼多單詞~

這個名叫filter的filter(不得不說這名字起的,真讓人容易混淆——!)用來處理乙個陣列,然後可以過濾出含有某個子串的元素,作為乙個子陣列來返回。可以是字串陣列,也可以是物件陣列。如果是物件陣列,可以匹配屬性的值。它接收乙個引數,用來定義子串的匹配規則。下面舉個例子說明一下引數的用法,我用現在特別火的幾個孩子定義了乙個陣列:

$scope.childrenarray =[,,

,,

];

$scope.func = function(e)

} //匹配屬性值中含有a的

} //匹配屬性值中含有4的

}} //引數是物件,匹配name屬性中含有i的

} //引數是函式,指定返回age>4的

json過濾器可以把乙個js物件格式化為json字串,沒有引數。這東西有什麼用呢,我一般也不會在頁面上輸出乙個json串啊,官網說它可以用來進行除錯,嗯,是個不錯的選擇。或者,也可以用在js中使用,作用就和我們熟悉的json.stringify()一樣。用法超級簡單:

}

limitto過濾器用來擷取陣列或字串,接收乙個引數用來指定擷取的長度。個人覺得這個filter有點雞肋,首先只能從陣列或字串的開頭進行擷取,其次,js原生的函式就可以代替它了,看看怎麼用吧:

}  //將會顯示陣列中的前兩項

把資料轉化為全部小寫。太簡單了,不多解釋。同樣是很雞肋的乙個filter,沒有引數,只能把整個字串變為小寫,不能指定字母。怎麼用我都懶得寫了。

number過濾器可以為乙個數字加上千位分割,像這樣,123,456,789。同時接收乙個引數,可以指定小float型別保留幾位小數:

}

orderby過濾器可以將乙個陣列中的元素進行排序,接收乙個引數來指定排序規則,引數可以是乙個字串,表示以該屬性名稱進行排序。可以是乙個函式,定義排序屬性。還可以是乙個陣列,表示依次按陣列中的屬性值進行排序(若按第一項比較的值相等,再按第二項比較),還是拿上面的孩子陣列舉例:

}div>      //按age屬性值進行排序

}div> //按照函式的返回值進行排序

}div> //如果age相同,按照name進行排序

內建的過濾器介紹完了,寫的我都快睡著了。。。正如你所看到的,ng內建的過濾器也並不是萬能的,事實上好多都比較雞肋。更個性化的需求就需要我們來定義自己的過濾器了,下面來看看如何自定義過濾器。

filter的自定義方式也很簡單,使用module的filter方法,返回乙個函式,該函式接收輸入值,並返回處理後的結果。話不多說,我們來寫乙個看看。比如我需要乙個過濾器,它可以返回乙個陣列中下標為奇數的元素,**如下:

() }

return

array;

}});

格式就是這樣,你的處理邏輯就寫在內部的那個閉包函式中。你也可以讓自己的過濾器接收引數,引數就定義在return的那個函式中,作為第二個引數,或者更多個引數也可以。

過濾器的基本知識就這些了。還是那句話,更多需要學習的還需專案的真正考驗。那麼,在專案來臨之前,先打好基礎吧~

AngularJs的過濾器

所謂過濾器就是過濾得到自己想要的資料 currency 格式化數字為貨幣格式。filter 從陣列項中選擇乙個子集。lowercase 格式化字串為小寫。orderby 根據某個表示式排列陣列。uppercase 格式化字串為大寫。uppercase 過濾器將字串格式化為大寫 divng contr...

angularjs過濾器的學習

1.ng內建了一些過濾器,它們是 currency 貨幣 date 日期 filter 子串匹配 匹配屬性值中含有a的 匹配屬性值中含有4的 引數是物件,匹配name屬性中含有i的 引數是函式,指定返回age 4的 json 格式化json物件 json過濾器可以把乙個js物件格式化為json字串,...

angularjs 過濾器filter 學習筆記

文章參考 過濾器 filter 正如其名,作用就是接收乙個輸入,通過某個規則進行處理,然後返回處理後的結果。主要用在資料的格式化上,例如獲取乙個陣列中的子集,對陣列中的元素進行排序等。ng內建了一些過濾器 總共九種 它們是 currency 貨幣 date 日期 filter 子串匹配 json 格...