#angularjs常用过滤器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="ctrl"> 货币currency：{{999.99|currency:'$':1}} <br /> 数字number：{{999.111|number:2}} <br /> 大写lowercase：{{"CXIONG"|lowercase}} <br /> 小写uppercase： {{"cxiong"|uppercase}} <br /> 截取字符limitTo：{{"cxiong"|limitTo:2:1}} <br /> 日期data：{{time|date:'yyyy年MM月dd日 HH时mm分ss秒'}} <br /> 排序orderBy：{{data|orderBy}} <br /> <!--filter精确匹配--> 过滤filter：{{data|filter:1:true}} <br /> </div> <script type="text/javascript"> var m=angular.module('app',[]); m.controller('ctrl',['$scope',function($scope){ $scope.time=new Date().getTime() $scope.data=[1,3,4,55,66,23,14,41] }]); </script> </body> </html>#$filter和callee应用表格排序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src='js/angular.min.js'> </script> <style type="text/css"> .ng-cloak{display:none;} </style> </head> <body ng-app="hd" ng-cloak class="ng-cloak"> <div ng-controller="ctrl"> <table border="" cellspacing="" cellpadding=""> <tr> <th ng-click="sort('name')">名称</th> <th ng-click="sort('num')">数量</th> <th ng-click="sort('price')">价格</th> </tr> <tr ng-repeat="d in data"> <td>`d`.`name`</td> <td>`d`.`num`</td> <td>`d`.`price`</td> </tr> </table> </div> <script type="text/javascript"> var m=angular.module('hd',[]) m.controller('ctrl',['$scope','$filter',function($scope,$filter){ $scope.data=[ {'name':'iphone6','num':150,'price':3999}, {'name':'beats','num':100,'price':999}, {'name':'iphone7','num':500,'price':5999}, {'name':'ipad','num':250,'price':1999} ] var status=true $scope.sort=function(field){ //arguments.callee 全局存放静态变量 if (arguments.callee[field]=='undefine') { arguments.callee[field]=true } arguments.callee[field]=!arguments.callee[field] $scope.data=$filter('orderBy')($scope.data,field,arguments.callee[field]) } }]) </script> </body> </html>#全局变量保存状态 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src='js/angular.min.js'> </script> <style type="text/css"> .ng-cloak{display:none;} </style> </head> <body ng-app="hd" ng-cloak class="ng-cloak"> <div ng-controller="ctrl"> <table border="1" cellspacing="" cellpadding=""> <tr> <th ng-click="sort('name')">名称</th> <th ng-click="sort('num')">数量 `status` <span ng-if="status">升序</span> <span ng-if="!status">降序</span> </th> <th ng-click="sort('price')">价格</th> </tr> <tr ng-repeat="d in data"> <td>`d`.`name`</td> <td>`d`.`num`</td> <td>`d`.`price`</td> </tr> </table> </div> <script type="text/javascript"> var m=angular.module('hd',[]) m.controller('ctrl',['$scope','$filter',function($scope,$filter){ $scope.data=[ {'name':'iphone6','num':150,'price':3999}, {'name':'beats','num':100,'price':999}, {'name':'iphone7','num':500,'price':5999}, {'name':'ipad','num':250,'price':1999} ] $scope.status=false $scope.sort=function(field){ //arguments.callee 全局存放静态变量 // if (arguments.callee[field]=='undefine') { // arguments.callee[field]=true // } // arguments.callee[field]=!arguments.callee[field] // $scope.data=$filter('orderBy')($scope.data,field,arguments.callee[field]) $scope.status=!$scope.status $scope.data=$filter('orderBy')($scope.data,field,$scope.status) } }]) </script> </body> </html>#$watch监控某个变量 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="ctrl"> $watch: <input type="text" ng-model="title"/>`err` </div> <script type="text/javascript"> var m=angular.module('app',[]); m.controller('ctrl',['$scope',function($scope){ $scope.title='' //n为当前输入字符，o为上一次字符 $scope.$watch('title',function(n,o){ $scope.err=n.length>0?'':'不能为空'; }) }]); </script> </body> </html>#$watch监控某个对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src='js/angular.min.js'> </script> <style type="text/css"> .ng-cloak{display:none;} </style> </head> <body ng-app="hd" ng-cloak class="ng-cloak"> <div ng-controller="ctrl"> 请输入姓名：<input type="text" ng-model="odata.name"/>`err` </div> <script type="text/javascript"> var m=angular.module('hd',[]) m.controller('ctrl',['$scope','$filter',function($scope,$filter){ $scope.odata={'name':'cxiong','age':29}; $scope.$watch('odata.name',function(n,o){ $scope.err=n.length?'':'不能为空'; }); }]) </script> </body> </html>#$watch和$filter实现排序和搜索框功能，自定义加*过滤器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src='js/angular.min.js'> </script> <style type="text/css"> .ng-cloak{display:none;} </style> </head> <body ng-app="hd" ng-cloak class="ng-cloak"> <div ng-controller="ctrl"> 搜索框：<input type="text" ng-model="search"/> <table border="1" cellspacing="" cellpadding=""> <tr> <th ng-click="sort('name')">名称</th> <th ng-click="sort('num')">数量 <span ng-if="status">升序</span> <span ng-if="!status">降序</span> </th> <th ng-click="sort('price')">价格</th> </tr> <tr ng-repeat="d in tmp"> <td>`d`.`name`</td> <td>`d`.`num`</td> <td>{{d.price|truncate}}</td> </tr> </table> </div> <script type="text/javascript"> var m=angular.module('hd',[]); //自定义加*过滤器 m.filter('truncate',function(){ return function(price){ return String(parseInt(price/100))+'**元' } }) m.controller('ctrl',['$scope','$filter',function($scope,$filter){ $scope.data=[ {'name':'iphone6','num':150,'price':3999}, {'name':'beats','num':100,'price':999}, {'name':'iphone7','num':500,'price':5999}, {'name':'ipad','num':250,'price':1999} ] //排序功能 $scope.status=false $scope.sort=function(field){ //arguments.callee 全局存放静态变量 // if (arguments.callee[field]=='undefine') { // arguments.callee[field]=true // } // arguments.callee[field]=!arguments.callee[field] // $scope.data=$filter('orderBy')($scope.data,field,arguments.callee[field]) $scope.status=!$scope.status $scope.tmp=$filter('orderBy')($scope.data,field,$scope.status) } //搜索框功能 //过滤后数据。用于显示 $scope.tmp=$scope.data $scope.$watch('search',function(n,o){ $scope.tmp=$filter('filter')($scope.data,n) }) }]) </script> </body> </html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
