angularJs(3)过滤器
-
简单的
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.js"></script> </head> <body ng-app="app" ng-controller="ctr"> <!--序列化数据--> <p>{{data | json}}</p> <!--保留5位小数--> <p>{{num | number:5}}</p> <!--从第一位开始截取二位--> <p>{{num | limitTo:2,1}}</p> <p><input type="text" ng-model="str"/></p> <ul> <li ng-repeat="item in data | filter:{age:str}"> <!-- 指定的键值查找数据，返回过滤后数组--> <span>{{item.name}}</span> <span>{{item.age}}</span> <span>{{item.job}}</span> </li> </ul> <script> angular.module('app',[]) .controller('ctr',['$scope',function($scope){ $scope.data=[{ name:'hxq', age:15, job:'很大金士顿' }, { name:'hxq', age:16, job:'岛上空豆粕蛋' }, { name:'hxq', age:17, job:'奥林匹斯宽度' }, { name:'hxq', age:18, job:'吃蛋' } ]; $scope.str=''; $scope.num='5.54454444444' }]) </script> </body> </html>
-
orderby
v in data |orderBy: what :flag
what：是根据什么排序
flag:为true/false正确或者反序<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../angular.js"> </script> </head> <body ng-app="app" ng-controller="ctr"> <table> <tr> <th ng-click="fn('name')">NAME</th> <th ng-click="fn('age')">AGE</th> <th ng-click="fn('code')">OCDE</th> </tr> <tr ng-repeat="v in data |orderBy: what :flag "> <td>{{v.name}}</td> <td>{{v.age}}</td> <td>{{v.code}}</td> </tr> </table> <script> angular.module('app',[]) .controller('ctr',['$scope', function ($scope) { $scope.flag=true; $scope.what='name'; $scope.fn=function(what){ // console.log(1) $scope.what=what; $scope.flag=!$scope.flag }; $scope.data=[ { name:'hxq', age:25, code:555 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 }, { name:'shg', age:18, code:125 }, { name:'发射点', age:19, code:849 } ] }]) </script> </body> </html>
-
filter
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../angular.js"> </script> </head> <body ng-app="app" ng-controller="ctr"> <p><input type="text" ng-model="str"/>输入要查找的名字内容</p> <input type="checkbox" ng-model="flag" ng-true-value='true' ng-false-value='false'/>是否按照名字结对查找 <p>{{flag}}</p> <table> <tr> <th>NAME</th> <th>AGE</th> <th>OCDE</th> </tr> <!--{name:str}:true 绝对匹配 --> <tr ng-repeat="v in data|filter:{name:str}:flag track by $index"> <!-- 参数1根基什么条件查找 也可为一字符串 表示对每一条数据进行全局匹配 参数2：绝对查找 不是查是否含这个字符串--> <td>{{v.name}}</td> <td>{{v.age}}</td> <td>{{v.code}}</td> </tr> </table> <script> angular.module('app',[]) .controller('ctr',['$scope', function ($scope) { $scope.data=[ { name:'hxq', age:25, code:555 }, { name:'shg', age:18, code:125 }, { name:'sddf', age:19, code:849 }, { name:'发ghfgh射点', age:19, code:849 }, { name:'发射rer点', age:19, code:849 } , { name:'trewt', age:19, code:849 } , { name:'wertert', age:19, code:849 } , { name:'oukj', age:19, code:849 } ] }]) </script> </body> </html>
- 自定义过滤器
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../angular.js"> </script> </head> <body ng-app="app" ng-controller="ctr"> <p><input type="text" ng-model="str"/>输入要查找的名字内容</p> <input type="checkbox" ng-model="flag" ng-true-value='true' ng-false-value='false'/>是否按照名字结对查找 <p>{{flag}}</p> <table> <tr> <th>NAME</th> <th>AGE</th> <th>OCDE</th> </tr> <!--{name:str}:true 绝对匹配 --> <tr ng-repeat="v in data|filter:{name:str}:flag track by $index"> <!-- 参数1根基什么条件查找 也可为一字符串 表示对每一条数据进行全局匹配 参数2：绝对查找 不是查是否含这个字符串--> <td>{{v.name}}</td> <td>{{v.age}}</td> <td>{{v.code}}</td> </tr> </table> <script> angular.module('app',[]) .controller('ctr',['$scope', function ($scope) { $scope.data=[ { name:'hxq', age:25, code:555 }, { name:'shg', age:18, code:125 }, { name:'sddf', age:19, code:849 }, { name:'发ghfgh射点', age:19, code:849 }, { name:'发射rer点', age:19, code:849 } , { name:'trewt', age:19, code:849 } , { name:'wertert', age:19, code:849 } , { name:'oukj', age:19, code:849 } ] }]) </script> </body> </html>
