过滤器
可以对输入的值按照指定的方案进行处理后再输出的函数。
1.货比过滤器currency：{{ currency_expression | currency : symbol}}
2.日期过滤器：date格式化date到字符串，基于format的要求。
{{ date_expression | date : format}}
3.数字过滤器：number，格式化数字
4.大小写：lowercase，uppercase
5.limitTo
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body ng-app="app"> <div ng-controller="ctrl"> currency:<input ng-model="t2" /> <br/> <h3>{{ t2|currency:'RMB ' }}</h3> <h2>{{birthday|date}}</h2> number:<input ng-model="t1" /><br /> <p1>{{t1|number:2}}</p1> <h2>{{ temp1 | uppercase}}</h2> LowerCase:<input ng-model="temp2" /><br/> <h2>{{temp2 | lowercase}}</h2> limitTo:<input ng-model="temp3" /> <br/> <h2>{{temp3 | limitTo:3}}</h2> </div> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/0122.js"></script> </body> </html>
var app = angular.module('app',[]);//创建的模块赋值给app对象 app.controller('ctrl',function ($scope) { $scope.birthday = new Date(); $scope.data = [1,2,3,4,5,6]; $scope.temp1="zhangqing"; })
6.filter：从array中选择一个子集，作为一个新数组返回
{{filter_expression | filter:expresion:comparator }}
ng-repeat（重要）:用来将数据集合按照指定的形式重复渲染出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body ng-app="app"> <div ng-controller="ctrl"> 任意字段<input type="text" ng-model="searchText.$" /> 搜索名字<input type="text" ng-model="searchText.name" /> 搜索电话<input type="text" ng-model="searchText.tel" /> <!--ng-repeat::用来将数据集合按照指定的形式重复渲染出来--> <table> <tr><td>name</td><td>tel</td></tr> <tr ng-repeat="friend in friends | filter:searchText"><!--filter过滤器:object--> <td>{{friend.name}}</td> <td>{{friend.tel}}</td> </tr> </table> </div> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/0122.js"></script> </body> </html>
var app = angular.module('app',[]);//创建的模块赋值给app对象 app.controller('ctrl',function ($scope) { $scope.birthday = new Date(); $scope.data = [1,2,3,4,5,6]; $scope.temp1="zhangqing"; $scope.friends=[ {name:'q1',tel:'1111'}, {name:'q2',tel:'2222'}, {name:'q3',tel:'3333'}, {name:'q4',tel:'4444'}, {name:'q5',tel:'5555'} ] })
7.orderBy：通过expression来排序指定的数组。字符串按字母的顺序排序，数字按照大小排序。注意：如果你发现数字没有正确排序，请确认他们保存的是数字而不是字符串。
{{orderBy_expression|orderBy:expression:reverse}}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="description" content="KunShan Online retailers "> <title></title> <link rel="stylesheet" href="css/angular-csp.css" /> </head> <body ng-app="app"> <div ng-controller="ctrl"> 任意字段<input type="text" ng-model="searchText.$" /> 搜索名字<input type="text" ng-model="searchText.name" /> 搜索电话<input type="text" ng-model="searchText.tel" /> <!--ng-repeat::用来将数据集合按照指定的形式重复渲染出来--> <table> <tr> <td><a href="javascript:void (0);" ng-click="orderFriend='name';reverse=!reverse;">name</a></td> <td><a href="javascript:void (0);" ng-click="orderFriend='tel';reverse=!reverse;">tel</a></td> </tr> <tr ng-repeat="friend in friends | orderBy:orderFriend:reverse"><!--filter过滤器:object--> <td>{{friend.name}}</td> <td>{{friend.tel}}</td> </tr> </table> </div> <script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/0122_orderby.js"></script> </body> </html>
var app = angular.module('app',[]);//创建的模块赋值给app对象 app.controller('ctrl',function ($scope) { $scope.friends=[ {name:'zq1',tel:'1111'}, {name:'qq2',tel:'2222'}, {name:'wq3',tel:'3333'}, {name:'eq4',tel:'4444'}, {name:'fq5',tel:'5555'} ] $scope.orderFriend=''; $scope.reverse=true; })