angular.js筛选器

angular.js提供了丰富的内置筛选器:

1.currency[:symbol],依据指定的symbol将数值格式化为货币。

2.filter:exp:compare,使用exp参数值对表达式进行宽松或严格筛选比较。compare通常为布尔值或返回布尔值的表达式,为true时将进行严格比较(===),为false时只检查期望值是否为真实值的子集(通常用作页面值搜索)

3.json,将js对象格式化为JSON字符串,不支持的属性将被忽略。

4.limitTo:limit,限制个数。

5.lowercase/uppercase,大小写转换。

6.number[:faction],将数字格式化为文本,指定faction参数时小数部分的位数将被限制。

7.orderBy:exp:reverse,根据exp参数进行排序,reverse为true时降序,false(默认)时升序。

8.date[:format],将js的日期对象进行格式化输出字符串。

以下示例展示了filter和orderBy筛选器的基本用法:

<!DOCTYPE HTML>
<html ng-app='myApp'>
	<head>
		<meta charset='utf-8'>
		<title>7</title>
		<style type="text/css">
			table{
				text-align: right;
			}
			td,th{
				padding: 3px;
			}
			th{
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div ng-controller='controllerA'>
			<h2>Sorting and ordering</h2>

			<input type='text' ng-model='filterString'>
			<table>
				<tr>
					<th>Title</th>
					<th>Url</th>
					<th>Stars</th>
				</tr>
				<tr ng-repeat="x in resources | filter:filterString | orderBy:'stars':true">
					<td>{{x.title}}</td>
					<td>{{x.url}}</td>
					<td>{{x.stars}}</td>
				</tr>
			</table>
		</div>
		<script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>
		
		<script>
			var app = angular.module('myApp',[]);

			app.controller('controllerA',function($scope){
				$scope.resources = [
					{title:'JQuery',stars:200,url:'http://jquery.com'},
					{title:'Bootstrap',stars:300,url:'http://bootstrap.com'},
					{title:'Dojo',stars:90,url:'http://dojo.com'},
					{title:'Angular.js',stars:260,url:'http://angular.js.com'}
				]
			})
		</script>
	</body>
</html>

相关推荐