angularjs 過濾器filter

來源:互聯網
上載者:User

在前面介紹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。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.