AngularJS過(guò)濾器filter用法實(shí)例分析
本文實(shí)例講述了AngularJS過(guò)濾器filter用法。分享給大家供大家參考，具體如下：
這節(jié)我們來(lái)看看angularjs的過(guò)濾器filter。
在我們開(kāi)發(fā)中經(jīng)常需要在頁(yè)面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。比如時(shí)間本地化，或者yyyy-MM-dd HH:mm:ss格式，數(shù)字精度格式化，本地化，人名格式化等等。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。并且我們能夠很輕易的自定義自己的領(lǐng)域filter。
如下實(shí)例：
html:
<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
<br/>
name: {{person | fullname:"- -"}}
<br/>
name: {{person | fullname:" " | uppercase }}
</div>
js:
function test($scope) {
}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
var filterfun = function(person, sep) {
sep = sep || " ";
person = person || {};
person.first = person.first || "";
person.last = person.last || "";
return person.first + sep + person.last;
};
return filterfun;
});
jsfiddle效果：http://jsfiddle.net/whitewolf/uCPPK/9/
在實(shí)例中首先演示了angularjs自帶的number的filter使用。再同樣為我們樣式了如何去創(chuàng)建一個(gè)angularjs的filter。其實(shí)現(xiàn)很簡(jiǎn)單.angularjs使得擴(kuò)展一切變得自然
最后說(shuō)明：angularjs filters支持鏈?zhǔn)綄?xiě)法，如何powershell或者其他操作系統(tǒng)外殼語(yǔ)言一樣的管道式模型，形如 value | filter1 | filter2。
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法，文中僅用了幾行代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解基于Angular4+ server render(服務(wù)端渲染)開(kāi)發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開(kāi)發(fā)教程 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn)，對(duì)此感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-05-05
本文通過(guò)示例向大家介紹了AngularJS語(yǔ)法的使用，小伙伴們認(rèn)真研讀下吧，非常的實(shí)用哦。2015-01-01
AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了AngularJS控制器數(shù)據(jù)共享的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
AngularJS封裝$http.post()實(shí)例詳解
這篇文章主要介紹了 AngularJS封裝$http.post()實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了淺談Angular單元測(cè)試總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解
這篇文章主要介紹了使用Angular CLI進(jìn)行Build(構(gòu)建)和Serve詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
AngularJS ng-controller 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-controller 指令,這里對(duì)ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08
Angularjs之ngModel中的值驗(yàn)證綁定方法
今天小編就為大家分享一篇Angularjs之ngModel中的值驗(yàn)證綁定方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09