直接上干货
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绑定过滤集合关键词,倒序两种过滤方式