詳解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ǔ)寫(xiě)的，這個(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)文章
Angular.js自動(dòng)化測(cè)試之protractor詳解
Protractor是一個(gè)建立在WebDriverJS基礎(chǔ)上的端到端(E2E)的AngularJS JavaScript Web應(yīng)用程序測(cè)試框架，下面這篇文章主要給大家介紹了angular.js自動(dòng)化測(cè)試之protractor的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了整理AngularJS中的一些常用指令,包括ng-app、ng-init、ng-model和ng-repeat這四個(gè)指令的講解,需要的朋友可以參考下2015-06-06
詳解什么是@ngrx/store開(kāi)發(fā)包中的MemoizedSelector
這篇文章主要為大家介紹了@ngrx/store開(kāi)發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Angular Universal 主要關(guān)注將 Angular App 如何進(jìn)行服務(wù)端渲染和生成靜態(tài) HTML，對(duì)于用戶交互復(fù)雜的 SPA 并不推薦使用 SSR，本文是在 Angular 14 環(huán)境中完成，有些內(nèi)容對(duì)于新的 Angular 版本可能并不適用，感興趣的朋友一起通過(guò)本文學(xué)習(xí)2022-11-11
依賴注入(DI -- Dependency Injection)是一種重要的應(yīng)用設(shè)計(jì)模式。Angular里面也有自己的DI框架，在設(shè)計(jì)應(yīng)用時(shí)經(jīng)常會(huì)用到它，它可以我們的開(kāi)發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過(guò)在類上添加@Injectable裝飾器來(lái)告訴系統(tǒng)這個(gè)類(服務(wù))是可注入的。2021-05-05
這篇文章主要給大家深入的介紹了關(guān)于Angular.JS中Scope繼承的相關(guān)資料，Angular。JS中scope之間的繼承關(guān)系使用JavaScript的原型繼承方式實(shí)現(xiàn)，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼
這篇文章主要介紹了基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本文主要介紹AngularJS 事件處理器,這里整理了相關(guān)資料和示例代碼，有需要的小伙伴可以參考下2016-08-08
Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記，通過(guò)本文首先給大家介紹了$filter服務(wù)，然后介紹下內(nèi)置filter及filter的簡(jiǎn)單使用，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
本文主要介紹AngularJs Forms，這里整理了相關(guān)資料及簡(jiǎn)單示例代碼，有需要的朋友可以參考下2016-09-09