直接上干货
AngularJS过滤器统称为filter
有以下几种过滤器
一.currency 货币格式过滤器
用法：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl"><!--货币过滤器输出：<span ng-bind="price | 参数1（必写）:参数2（选写）: 参数3（选写） "></span>--></div> <!--注释内容-->1.如上在绑定标签上加“| currency”参数1为默认样式页面显示会$499<script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.price = 499.1213; }]); </script> </body> </html>2.如上在绑定标签上加“| currency:'￥' ”参数2为货币样式页面显示会￥499
3.如上在绑定标签上加“| currency:'￥' :3 ”参数3为精确到小数点后几位页面显示会￥499.121
二.date 日期时间过滤器
用法：
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> 货币过滤器输出：<span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.date = new Date(); }]); </script> </body> </html>
日期格式化：通常情况下，需要按照用户的要求进行输出，这时候就会附带参数
y/M/d/h/m/s/E 年/月/日/时/分/秒/星期
三.filter 输出过滤器（重要）
用法：
上面的users循环在span标签中输出keyword传递一个字符串，找到所有符合这个字符串的对象<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> 关键词：<input type="text" ng-model="keyword"> <ul> <li ng-repeat="u in users | filter:keyword"> <span ng-bind="u.userID"></span> <span ng-bind="u.username"></span> <span ng-bind="u.nickname"></span> </li> </ul> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.users = [ {userID:1, username:"cat", nickname:"tom"}, {userID:2, username:"xiaofan", nickname:"张小凡"}, {userID:3, username:"biyao", nickname:"碧瑶"}, {userID:4, username:"luxueqi", nickname:"陆雪琪"}, ] }]); </script> </body> </html>具体用法可以自行练习体会
四.json 把目标对象转化为json对象
用法：
这个过滤器比较鸡肋，一般用的较少，不再赘述
五.limitTo 长度限制过滤器
用法：
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> 长度：<input type="text" ng-model="length"><br /> 位置：<input type="text" ng-model="index"> <br /> <ul> <li ng-repeat="u in users | limitTo:length:index"> <span ng-bind="u.userID"></span> <span ng-bind="u.username"></span> <span ng-bind="u.nickname"></span> </li> </ul> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.users = [ {userID:1, username:"cat", nickname:"tom"}, {userID:2, username:"xiaofan", nickname:"张小凡"}, {userID:3, username:"biyao", nickname:"碧瑶"}, {userID:4, username:"luxueqi", nickname:"陆雪琪"}, ] }]); </script> </body> </html>
参数1length限定循环长度，上例中通过input输入循环的长度
参数2index规定循环起始位置
六.lowercase 小写转换
用法：
<div ng-bind="name | lowercase"></div>将目标字符串英文内容转化成全小写样式
七.uppercase大写转换
用法：
<div ng-bind="name | uppercase"></div>将目标字符串英文内容转化成全大写样式
八.number 格式为文本
用法：
过滤输入内容是否为数字类型，如果是则返回数字，不是则不输出
九.orderBy 过滤器集合
用法：
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> </head> <body> <div ng-controller="myCtrl"> 关键词：<input type="text" ng-model="keyword"><br /> 倒序：<input type="checkbox" ng-model="sort"> <br /> <ul> <li ng-repeat="u in users | orderBy:keyword:sort"> <span ng-bind="u.userID"></span> <span ng-bind="u.username"></span> <span ng-bind="u.nickname"></span> </li> </ul> </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.users = [ {userID:1, username:"cat", nickname:"tom"}, {userID:2, username:"xiaofan", nickname:"张小凡"}, {userID:3, username:"biyao", nickname:"碧瑶"}, {userID:4, username:"luxueqi", nickname:"陆雪琪"}, ] }]); </script> </body> </html>
标签上通过orderBy绑定过滤集合关键词，倒序两种过滤方式
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
