AngularJS中,Filter实际完成的是变换的功能。
Filter的用法如下:
1. 通过“|”来使用Filter
比如,下例中使用了uppercase的filter,会把name自动转换成大写字母,hbr会变成HBR
也可以用lowercase全部转换成小写字母,HBR会变成hbr
<!DOCTYPE html>
<html >
<head>
<title>Simple app</title>
<script
src="bower_components/angular/angular.js">
</script>
</head>
<body>
<div ng-app="">
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name |uppercase}}</h1>
</div>
</body>
</html>
2. 通过Controller来定义使用,如:
var myApp=angular.module("myApp",[]);
myApp.controller('FilterController', ['$scope', '$filter',
function($scope, $filter) {
$scope.lowercasename = $filter('lowercase')("HBR");
}]);
Filter的使用举例
显示: 123.46
{{ 123.456789 | number:2 }}
$123.00
{{ 123|currency}}¥123.00
{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/13 12:09 PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }} <!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }} <!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->
年份方面的:
{{ today | date:'yyyy' }} <!-- 2013 -->
{{ today | date:'yy' }} <!-- 13 -->
{{ today | date:'y' }} <!-- 2013 -->
月份:
{{ today | date:'MMMM' }} <!-- August -->
{{ today | date:'MMM' }} <!-- Aug -->
{{ today | date:'MM' }} <!-- 08 -->
{{ today | date:'M' }} <!-- 8 -->
小时:
{{ today | date:'dd' }} <!-- 09 -->
{{ today | date:'d' }} <!-- 9 -->
{{ today | date:'EEEE' }} <!-- Thursday -->
{{ today | date:'EEE' }} <!-- Thu -->
分钟:
{{ today | date:'mm' }} <!-- 09 -->
{{ today | date:'m' }} <!-- 9 -->
秒:
{{ today | date:'ss' }} <!-- 02 -->
{{ today | date:'s' }} <!-- 2 -->
毫秒级: {{ today | date:'.sss' }} <!-- .995 -->
上下午(AM/PM)
{{ today | date:'a' }} <!-- AM -->
带时区: {{ today | date:'Z' }} <!-- -0700 -->
自定义:
{{ today | date:'MMM d, y' }} <!-- Aug 09, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8 -->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->