在前面介紹angularjs已經很多了,中途由於工作和一切生活瑣事,暫停了很久。今天在這裡將繼續angularjs講解,這節我 們來看看angularjs的過濾去filter。
在我們開發中經常需要在頁面顯示給使用者的資訊需要一定處理格式化,才能顯示給 使用者。比如時間本地化,或者yyyy-MM-dd HH:mm:ss格式,數字精度格式化,本地化,人名格式化等等。在angularjs中為我們提 供了叫filter的指令,讓我們能夠很輕易就能做到著一些列的功能,angularjs內部為我們提供了number等很多內建的filter。 並且我們能夠很輕易的自訂自己的領域filter。
如下執行個體:
html:
<center 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 }} </center>
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/12/
在執行個體中首先示範了angularjs內建的number 的filter使用。再同樣為我們樣式了如何去建立一個angularjs的filter。其實現很簡單.angularjs使得擴充一切變得自然
最後說明:filters支援鏈式寫法,如何powershell或者其他動作系統外殼語言一樣的管道式模型,形如 value | filter1 | filter2。