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