ng 过滤器
1、ng中自带的过滤器
过滤器：实现对数据的筛选、过滤、格式化。
过滤器是一个有返回值的方法。
过滤器语法：
{{ expression |过滤器1:'参数' | 过滤器2:'参数' }}
| --》 管道，支持多重过滤。
常见的过滤器中：
①currency 货币样式的格式化
②date 日期格式化 参数： y M d h m s 年月日 时分秒
③filter 将一个array，处理一个新的数组
④json 将对象转换成json格式的字符串
'{"name":123}'
⑤uppercase/lowercase 大小写的转换
⑥orderBy 排序：按照字符串首字母排序，按照数字的大小排序，默认是升序的。
{{ expression | orderBy:'':boolean}}
⑦number 将一个数字进行格式化，根据参数决定显示小数点后的位数
⑧limitTo
限定数组中的个数
例子：
效果：
代码：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <!-- 货币--> <p>{{price | currency}}</p> <p>{{price | currency :'￥'}}</p> <!-- 日期--> <p>{{myDate}}</p> <p>{{myDate | date:'MM-dd hh-mm'}}</p> <!-- 大小写转换--> <p>{{name | uppercase}}</p> <p>{{name | lowercase}}</p> <!-- 排序 order by--> <ul> <li ng-repeat="stu in stuList | orderBy:'age':true"> <p> {{"name is "+stu.name+" age is "+stu.age}} </p> </li> </ul> <p>{{"num is "+num}}</p> <p>{{num | number:2}}</p> <ol> <li ng-repeat="tmp in list | limitTo:2"> {{tmp}} </li> </ol> </div> <script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope) { console.log('myCtrl func is called'); $scope.price = 1002; $scope.myDate = new Date();//初始化一个日期 //大小写转换 $scope.name = 'Michael'; $scope.stuList = [ {name:'zhangsan',age:20}, {name:'lisi',age:28}, {name:'wanger',age:22} ]; $scope.num = 10.2333; $scope.list = [10,20,30,40,50]; }) </script> </body> </html>
2.通过$scope定义一个对象数组(5个)，对象包含的属性：score\age\name。
实现按照score降序只显示前三名。
orderBy limitTo.
效果：
代码：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title></title> </head> <body> <div ng-controller="myCtrl"> <ul> <li ng-repeat="stu in stuList | orderBy:'score':true | limitTo:3"> {{stu.name+"-"+stu.age+"-"+stu.score}} </li> </ul> </div> <script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope) { console.log('myCtrl func is called'); $scope.stuList = [ {name:'name6',age:10,score:80}, {name:'name5',age:10,score:79}, {name:'name4',age:10,score:82}, {name:'name3',age:10,score:89}, {name:'name2',age:10,score:60} ]; }) </script> </body> </html>
