AngularJS過濾器filter用法執行個體分析_AngularJS

本文執行個體講述了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內建的number的filter使用。再同樣為我們樣式了如何去建立一個angularjs的filter。其實現很簡單.angularjs使得擴充一切變得自然

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

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