您的位置：首页 > Web前端 > AngularJS

AngularJS 过滤器

2016-03-19 14:07 766 查看
过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS中提供了如下几种过滤器：

过滤器描述
filter从数组项中选择一个子集
currency格式化数字为货币格式
number格式化数字为文本
date格式化日期为指定格式字符串
json允许将js对象转换为JSON字符串
lowercase格式化字符串为小写
uppercase格式化字符串为大写
limitTo从数组或字符串项中选择制定长度的一个子集
orderBy根据某个表达式排列数组

filter

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.items = [];
for (var i = 0; i < 20; i++) {
$scope.items.push("item" + i);
}
$scope.welcom = function() {
return "Hello " + $scope.name;
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="item" />
<ul>
<li ng-repeat="item in items|filter:item">{{item}}</li>
</ul>
</body>

</html>


运行效果：





currency

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.amount = 100.25;
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{amount|currency}}</div>
<div>{{amount|currency:"￥"}}</div>
<div>{{amount|currency:"￥":1}}</div>
</body>

</html>


运行效果：



number

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.amount = 100.25;
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{amount|number:1}}</div>
</body>

</html>


运行效果：



date

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.now = new Date();
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{now|date:'yyyy-MM-dd HH:mm:ss'}}</div>
</body>

</html>


运行效果：



json

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.jsObj = {
first: 'jiang',
last: 'gujin'
};
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{jsObj|json}}</div>
</body>

</html>


运行效果：



lowercase和uppercase

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "jIanG guJiN";
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{name|lowercase}}</div>
<div>{{name|uppercase}}</div>
</body>

</html>


运行效果：



limitTo

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "jiang gujin";
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{name|limitTo:8}}</div>
</body>

</html>


运行效果：



orderBy

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.friends = [{
name: 'John',
phone: '555-1212',
age: 10
}, {
name: 'Mary',
phone: '555-9876',
age: 19
}, {
name: 'Mike',
phone: '555-4321',
age: 21
}, {
name: 'Adam',
phone: '555-5678',
age: 35
}, {
name: 'Julie',
phone: '555-8765',
age: 29
}];
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<table class="friend">
<tr>
<th><a href="" ng-click="predicate = 'name'; reverse=false">Name</a> (
<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
<th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
<th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
</tr>
<tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</body>

</html>


运行效果：



自定义过滤器

下面我们来实现一个字符串反转的过滤器。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.filter("reverse",
function() {
return function(input, uppercase) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
app.controller("myCtrl", function($scope) {
$scope.name = "jianggujin";
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>{{name|reverse}}</div>
<div>{{name|reverse:true}}</div>
</body>

</html>


运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  filter angularjs
相关文章推荐
新的分享
章节导航