javascript
3.AngularJS-过滤器
轉自：https://www.cnblogs.com/best/p/6225621.html
二、過濾器
使用過濾器格式化數據，變換數據格式，在模板中使用一個插值變量。語法格式如下：
{{ express | filter:parameter1:p2:p3… | … | …}}
過濾器分了內置過濾器與自定義過濾器，過濾器的調用方式也分了在模板中調用與在函數中調用。
2.1、內置過濾器
常見的內置過濾器有：
1)、currency(貨幣)
{{123.456 | currency:'￥'}}
2)、number(數字)
{{12.235| number:2}}
3)、uppercase , lowercase(大小寫)格式化
{{"Hello"| uppercase}}
4)、json(數據)格式化
{{userObject| json}}
5)、limitTo(截取)格式化，數量限制
{{"StringObject" | limitTo : 3}}
6)、date 日期格式化
{{name | date : 'yyyy-MM-dd hh:mm:ss'}}
'yyyy': 4位數字的年份(如AD 1 => 0001, AD 2010 => 2010)?
'yy': 2位數字的年份，范圍為(00-99)。(如AD 2001 => 01, AD 2010 => 10)?
'y': 1位數字的年份，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)?
'dd': 日，范圍為(01-31)?
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)?
'HH': 小時, 范圍為(00-23)
'H': 小時 (0-23)?
'hh': am/pm形式的小時, 范圍為(01-12)
'h': am/pm形式的小時, (1-12)?
'mm': 分鐘,范圍為 (00-59)
'm': 分鐘 (0-59)?
'ss': 秒, 范圍為 (00-59)?
's': 秒 (0-59)?
'.sss' or ',sss': 毫秒,范圍為 (000-999)?
'a': am/pm 標記?
'Z': 4 位數字的時區偏移(+符號)(-1200-+1200)?
'ww': ISO-8601 年內的周數 (00-53)
'w': ISO-8601 年內的周數 (0-53)
format 字符串也可以是以下預定義的本地化格式之一:
'medium': 等于en_US本地化后的 'MMM d, y h:mm:ss a' (如：Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的 'M/d/yy h:mm a' (如： 9/3/10 12:05 pm)?
'fullDate': 等于en_US本地化后的 'EEEE, MMMM d, y' (如： Friday, September 3, 2010)?
'longDate': 等于en_US本地化后的 'MMMM d, y' (如： September 3, 2010)?
'mediumDate': 等于en_US本地化后的 'MMM d, y' (如： Sep 3, 2010)?
'shortDate': 等于en_US本地化后的 'M/d/yy' (如： 9/3/10)?
'mediumTime': 等于en_US本地化后的 'h:mm:ss a' (如： 12:05:08 pm)?
'shortTime': 等于en_US本地化后的 'h:mm a' (如： 12:05 pm)
format 字符串可以包含固定值。這需要用單引號括起來 (如： "h 'in the morning'")。如果要輸出單引號，使序列中使用兩個單引號(如： "h 'o''clock'")。
7)、orderBy(排序)格式化
orderBy:'age':reverse
reverse是true表示降序、false表示升序
8)、filter(篩選&過濾)格式化
{{name | filter : 'l' | json}}
2.1.1、在模板中使用過濾器
示例代碼：
<!DOCTYPE html> <!--指定angular管理的范圍--> <html ng-app="app01"><head><meta charset="UTF-8"><title>過濾器</title></head><body><!--指定控制器的作用范圍--><form ng-controller="Controller1" name="form1"><p>貨幣：{{money}} ，{{money|currency}} ，{{money|currency:"￥"}}</p><p>數字：{{money|number:1}} ，{{money | number:1 | currency:"$" }}</p><p>大寫：{{message|uppercase}}</p><p>小寫：{{message|lowercase}}</p><p>json：{{user | json}}</p><p>截取：{{message|limitTo:5|uppercase}}</p><p>日期1：{{birthday|date:'yyyy年MM月dd日 HH:mm:ss'}}</p><p>日期2：{{birthday|date:'fullDate'}}</p><p>排序：{{users|orderBy:'age':true}}</p></form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定義模塊，指定依賴項為空var app01 = angular.module("app01", []);//定義控制器，指定控制器的名稱，$scope是全局對象app01.controller("Controller1", function($scope) {$scope.money=1985.678;$scope.message="Hello AngularJS!"$scope.user={name:"rose",age:18};$scope.birthday=new Date();$scope.users=[{name:"rose",age:18},{name:"jack",age:19},{name:"tome",age:17}];});</script></body></html>運行結果：
2.1.2、在腳本中調用過濾函數
在函數中調用過濾器的方法是：在控制中添加對的依賴，filter的依賴，filter("過濾函數名稱")(被過濾對象,'參數')
示例代碼：
<!DOCTYPE html> <!--指定angular管理的范圍--> <html ng-app="app01"><head><meta charset="UTF-8"><title>過濾器</title></head><body><!--指定控制器的作用范圍--><form ng-controller="Controller1" name="form1">{{money}}<hr/>{{moneyString}}</form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定義模塊，指定依賴項為空var app01 = angular.module("app01", []);//定義控制器，指定控制器的名稱，$scope是全局對象app01.controller("Controller1", function($scope,$filter) {$scope.money=1985.897;//使用$filter服務查找currency函數，并調用$scope.moneyString=$filter("currency")($scope.money,'USD$');});</script></body></html>運行結果：
2.2、自定義過濾器
示例代碼：
<!DOCTYPE html> <!--指定angular管理的范圍--> <html ng-app="app01"><head><meta charset="UTF-8"><title>過濾器</title></head><body><!--指定控制器的作用范圍--><form ng-controller="Controller1" name="form1"><p>{{"Hello AngularJS and NodeJS" | cutString:15:'...'}}</p><p>{{longString}}</p></form><!--引入angularjs框架--><script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//定義模塊，指定依賴項為空var app01 = angular.module("app01", []);//向模塊中添加過濾//用于裁剪字符，超過長度則截取，添加...app01.filter("cutString",function(){return function(srcString,length,addString){if(srcString.length<length){return srcString;}return srcString.substring(0,length)+addString;}});//定義控制器，指定控制器的名稱，$scope是全局對象app01.controller("Controller1", function($scope,$filter) {$scope.longString=$filter("cutString")("Hello AngularJS and NodeJS",5,":):):)");});</script></body></html>運行結果：
轉載于:https://www.cnblogs.com/sharpest/p/8126714.html
總結
以上是生活随笔為你收集整理的3.AngularJS-过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bochs运行xp_bochs xp 镜
- 下一篇： apicloud项目怎么运行_Sprin