小人兒的筆記（AngularJS）--04

2024-04-27 15:08:02

字體：大中小

供稿：網(wǎng)友

過濾器

1.用于將數(shù)據(jù)格式化后展現(xiàn)； 2.AngularJS內(nèi)置多個過濾器，并支持自定義； 3.可以用在視圖模板(templates)、指令（directives）、控制器(controllers)或者服務(wù)(services)中； 4.在視圖模板或指令中使用運算符“|”添加過濾器； 5.在控制器或服務(wù)中使用$filter；

Angular共內(nèi)置了9種過濾器，分別是

貨幣currency : 用于以貨幣形式顯示數(shù)據(jù)，默認以$為貨幣符號，保留小數(shù)點后2位，可以指定貨幣符號和保留位數(shù)，參數(shù)順序不能顛倒，自動四舍五入；如：{{num | currency:'￥':3}}數(shù)字number : 用于保留小數(shù)位數(shù)，自動四舍五入；日期date： Date類型數(shù)據(jù)默認輸出為與基準時間相差毫秒數(shù)預(yù)定義格式：short、medium、shortDate、 mediumDate（默認格式）、longDate、fullDate、shortTime、mediumTime自定義格式：使用字母y、M、d、h/H、m、s、E等自由組合如： <h1>{{now | date:"yyyy-MM-dd HH:mm:ss"}}</h1>

字符串大小寫lowercase和uppercase

個數(shù)限制limitTo

用于截取部分字符串或數(shù)組，參數(shù)為正數(shù)表示截取開始部分，負數(shù)表示截取結(jié)尾部分；當參數(shù)超出數(shù)據(jù)長度，則返回原始數(shù)據(jù)；當有兩個參數(shù)時，第一個代表截取的長度，第二個代表索引；如： <h1>limitTo:2:3 :{{str | limitTo:5:3}}</h1> <h1>limitTo:-2:-3 :{{str | limitTo:-5:-3}}</h1>JSON格式化json 用于將JSON對象或javaScript對象轉(zhuǎn)換為JSON格式字符串；數(shù)據(jù)篩選filter數(shù)據(jù)排序orderBy

過濾器在視圖層的用法

{{表達式 | 過濾器1名稱 : 參數(shù)a：參數(shù)b | 過濾器2名稱 : 參數(shù)c : 參數(shù)d | … }}

<h1>{{123.3445 | number:3 | currency:'￥'}}</h1><h1>{{123.3445 | currency:'￥':3 | number :2}}</h1>

過濾器在控制器層的用法

例：

<div ng-controller="FilterController"> <h2>{{num}}</h2> <h2>{{str}}</h2> </div>法1：angular.module('myApp', []).controller(//在定義控制器時，將過濾器注入，格式為：過濾器名Filter；//注入的過濾器作為函數(shù)使用，第一個參數(shù)為要過濾的數(shù)據(jù)，后面依次為過濾器所需參數(shù)； 'FilterController', ['$scope','currencyFilter','lowercaseFilter', function($scope,cf,lcf){ $scope.str=lcf("Hello World"); $scope.num=cf(123.456789,'￥',3);}])法2：.controller(//當需要注入的過濾器較多時，也可以注入$filter服務(wù)，然后使用：$ft(“過濾器名”)(參數(shù)列表)；如此處的str需要經(jīng)過兩層過濾。 'FilterController', ['$scope','$filter', function($scope,$filter){ var tmp=$filter("number")(123.3445,3); $scope.str=$filter("currency")(tmp,"￥");}]);

上一篇：倒計時

下一篇：Javascript閉包