AngularJS學習筆記filter

標籤：style   blog   http   color   使用   os   

filter是對資料進行過濾操作，比如按某個欄位搜尋、格式化資料等等，是一個非常有用的介面。下面就簡單介紹下它的用法。

AngularJS內建的filter介面，|是filter的分隔字元，參數用：分隔；

currency,格式化number，貨幣化，預設是轉化成美元  param(number,symbol),傳回值將會把數字每3位加一個逗號

<input type="number" ng-model="amount"/><p>預設美元：{{amount|currency}}</p><p>人民幣:{{amount|currency:‘¥‘}}</p><p>空：{{amount|currency:‘‘}}</p>

結果：

date       ：格式化時間，param(date|Date,number,string,format)filter       :過濾array，param(string|object|function,第二參數不明白）json        :將一個object轉換成json形式的字串limitTo   :限制string或array的長度，參數如果是正數（positive）則從beginning開始，如果是負數（negative）則從end開始lowercase:小寫uppercase:大寫number :保留小數點個數，預設是3位，傳回值將會把數字每3位加一個逗號orderBy：對數組進行排序，param(string|function|array,reverse); 自訂filter基本用法如下例：

var moduleName = angular.module(‘moduleName‘, []);//對字串的過濾moduleName.filter(‘filterName‘, function() {    return function(data) {        //do something to change the data value，but dont change the data type.        return data;    }})//對array的過濾moduleName.filter(‘plus15‘, function() {    return function(orginalArr) {        var arr = [];        angular.foEach(function(value, key) {            if (value >= 15) {                arr.push(value);            }        })        return arr;    }})

html使用：

<ul ng-repeat="value in historyData | plus15">    <li>{{value.day|filterName}}:{{value.temp}}</li></ul>