詳解AngularJS中的filter過(guò)濾器用法
系統(tǒng)的學(xué)習(xí)了一下angularjs，發(fā)現(xiàn)angularjs的有些思想根php的模塊smarty很像，例如數(shù)據(jù)綁定，filter。如果對(duì)smarty比較熟悉的話，學(xué)習(xí)angularjs會(huì)比較容易一點(diǎn)。這篇簡(jiǎn)單說(shuō)一下angularjs的filter功能，angularjs的filter功能可分為二種，一種是內(nèi)置的過(guò)濾器，一種是自定義的。
一，內(nèi)置的過(guò)濾器
1，uppercase，lowercase大小轉(zhuǎn)換
{{ "lower cap string" | uppercase }} //結(jié)果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //結(jié)果：tank is good
｜這里的豎線是一種管道功能，如果對(duì)linux比較熟悉的話，這塊的｜根linux的管道功能，基本是一樣的
2，json格式化
{{ {foo: "bar", baz: 23} | json }} //結(jié)果：{ "foo": "bar", "baz": 23 }
注意：bza沒(méi)格式前是沒(méi)有雙引號(hào)的，格式化后就轉(zhuǎn)換成了json數(shù)據(jù)了。
3，date格式化
{{ 1304375948024 | date }} //結(jié)果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //結(jié)果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //結(jié)果：2011-05-03 06:39:08
4，number格式化
{{ 1.234567 | number:1 }} //結(jié)果：1.2
{{ 1234567 | number }} //結(jié)果：1,234,567
5，currency貨幣格式化
{{ 250 | currency }} //結(jié)果：$250.00
{{ 250 | currency:"RMB ￥ " }} //結(jié)果：RMB ￥ 250.00
6，filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
//上例結(jié)果：[{"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':'iphone'} }} //查找name為iphone的行
//上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}]
7，limitTo字符串，對(duì)像的截取
{{ "i love tank" | limitTo:6 }} //結(jié)果：i love
{{ "i love tank" | limitTo:-4 }} //結(jié)果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //結(jié)果：[{"age":20,"id":10,"name":"iphone"}]
8，orderBy對(duì)像排序
{{ [{"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' }} //根據(jù)id升序排
二，自定filter功能
我找了一個(gè)基本angularjs的mvc框架，phonecat，自定義filter也是在這基礎(chǔ)寫的，這個(gè)框架挺好用的。
1，filters.js添加一個(gè)module
angular.module('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});
2，app.js中加載這個(gè)module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers',
'facebookControllers',
'tanktest'
]);
3，html中調(diào)用
{{ "TANK is GOOD" | lowercase |tankreplace}} //結(jié)果：===== is good
注意：| lowercase |tankreplace管道命令可以有多個(gè)
三、filter的兩種使用方法
1. 在模板中使用filter
我們可以直接在{{}}中使用filter，跟在表達(dá)式后面用 | 分割，語(yǔ)法如下：
{{ expression | filter }}
也可以多個(gè)filter連用，上一個(gè)filter的輸出將作為下一個(gè)filter的輸入（怪不得這貨長(zhǎng)的跟管道一個(gè)樣。。）
{{ expression | filter1 | filter2 | ... }}
filter可以接收參數(shù)，參數(shù)用 : 進(jìn)行分割，如下：
{{ expression | filter:argument1:argument2:... }}
除了對(duì){{}}中的數(shù)據(jù)進(jìn)行格式化，我們還可以在指令中使用filter，例如先對(duì)數(shù)組array進(jìn)行過(guò)濾處理，然后再循環(huán)輸出：
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
我們的js代碼中也可以使用過(guò)濾器，方式就是我們熟悉的依賴注入，例如我要在controller中使用currency過(guò)濾器，只需將它注入到該controller中即可，代碼如下：
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}
在模板中使用{{num}}就可以直接輸出$123,534.00了！在服務(wù)中使用filter也是同樣的道理。
此時(shí)你可能會(huì)有疑惑，如果我要在controller中使用多個(gè)filter，難道要一個(gè)一個(gè)注入嗎，這豈不太費(fèi)勁了？小兄弟莫著急~ng提供了一個(gè)$filter服務(wù)可以來(lái)調(diào)用所需的filter，你只需注入一個(gè)$filter就夠了，使用方法如下：
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
可以達(dá)到同樣的效果。好處是你可以方便使用不同的filter了。
- Javascript中關(guān)于Array.filter()的妙用詳解
- AngularJS中的過(guò)濾器filter用法完全解析
- JavaScript 數(shù)組some()和filter()的用法及區(qū)別
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法
- JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
- JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- Vue.js報(bào)錯(cuò)Failed to resolve filter問(wèn)題的解決方法
- AngularJS過(guò)濾器filter用法總結(jié)
- 詳解AngularJS Filter（過(guò)濾器）用法
- JavaScript中filter的用法實(shí)例分析
相關(guān)文章
本篇文章主要介紹了基于AngularJS的拖拽上傳的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
大家都知道，AngularJS中的$http有很多參數(shù)和調(diào)用方法，所以本文只記錄了比較常用的應(yīng)用及參數(shù)，方便大家以后使用的時(shí)候參考學(xué)習(xí)，下面一起來(lái)看看吧。2016-08-08
AngularJS標(biāo)簽頁(yè)tab選項(xiàng)卡切換功能經(jīng)典實(shí)例詳解
這篇文章主要介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)tab選項(xiàng)卡功能,結(jié)合實(shí)例形式總結(jié)分析了各種常用的tab選項(xiàng)卡切換操作實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-05-05
Angular7實(shí)現(xiàn)拖放Drag?Drop示例詳解
這篇文章主要介紹了Angular7實(shí)現(xiàn)拖放Drag?Drop示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-12-12
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
本文給大家總結(jié)了一些angularjs的基礎(chǔ)知識(shí)及相關(guān)示例，分享給大家，希望能對(duì)大家有所幫助。2015-01-01
angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angular5中狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Angular5中狀態(tài)管理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在我們創(chuàng)建一個(gè)angularJS應(yīng)用的時(shí)候，菜單往往往是不可或缺的元素之一。接下來(lái)通過(guò)本文給大家介紹AngularJS動(dòng)態(tài)菜單操作指令，感興趣的朋友一起學(xué)習(xí)吧2017-04-04
利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的方法詳解
單元測(cè)試是一種能夠幫助開(kāi)發(fā)者驗(yàn)證代碼中某一部分有效性的技術(shù)。下面這篇文章主要給大家介紹了關(guān)于利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-06-06