首頁 > web前端 > js教程 > AngularJS過濾器filter用法實例分析

AngularJS過濾器filter用法實例分析

高洛峰
發布: 2017-02-07 14:00:46
原創
1116 人瀏覽過

本文實例講述了AngularJS過濾器filter用法。分享給大家供大家參考,如下:

這節我們來看看angularjs的濾鏡filter。

在我們開發中經常需要在頁面顯示給使用者的資訊需要一定處理格式化,才能顯示給使用者。例如時間在地化,或是yyyy-MM-dd HH:mm:ss格式,數位精確度格式化,在地化,人名格式化等等。在angularjs中為我們提供了叫filter的指令,讓我們能夠很輕易就能做到著一些列的功能,angularjs內部為我們提供了number等很多內建的filter。而我們能夠很輕易的自訂自己的領域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的filter。其實實作很簡單.angularjs使得擴充一切變得自然

最後說明:angularjs filters支援鍊式寫法,如何powershell或其他作業系統外殼語言一樣的管道式模型,形如 value | filter1 | filter2。

希望本文所述對大家AngularJS程式設計有所幫助。

更多AngularJS過濾器filter用法實例分析相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板