AngularJS过滤器
来源：互联网 发布：河源市民网络问政平台 编辑：程序博客网 时间：2024/06/15 18:40
直接上干货
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><!--注释内容--><script> var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function($scope) { $scope.price = 499.1213; }]);</script></body></html>1.如上在绑定标签上加“| currency”参数1为默认样式页面显示会$4992.如上在绑定标签上加“| 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 输出过滤器（重要）
用法：
<!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>上面的users循环在span标签中输出keyword传递一个字符串，找到所有符合这个字符串的对象具体用法可以自行练习体会
四.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绑定过滤集合关键词，倒序两种过滤方式
1 0
- angularjs 过滤器
- AngularJs 过滤器
- AngularJS--过滤器
- AngularJs过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJs 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- angularjs-过滤器
- AngularJS 过滤器
- AngularJs过滤器
- angularJS 过滤器
- AngularJS 过滤器
- angularjs过滤器
- angularJS 过滤器
- AngularJS 过滤器
- dockerfile小记
- C中的二维数组打印
- java注释
- 移动端input弹出带有搜索按钮的键盘与获取点击搜索按钮触发的事件
- C++基础-string截取、替换、查找子串函数
- AngularJS过滤器
- 欢迎使用CSDN-markdown编辑器
- 数据分析-箱线图
- myeclipse修改内存大小不足
- CentOS7在空闲一段时间或重启后网络总需要手动开启解决方案
- Spring Boot 学习15--定时任务的使用
- 尝试进行高效开发
- 修改开机动画
- 函数分组学通MongoDB——细说高级操作
