#angularjs常用过滤器 <!DOCTYPEhtml> <html> <head> <Metacharset="utf-8"/> <title></title> <scriptsrc="js/angular.min.js"></script> </head> <body> <divng-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> <scripttype="text/javascript"> varm=angular.module('app',[]); m.controller('ctrl',['$scope',function($scope){ $scope.time=newDate().getTime() $scope.data=[1,3,4,55,66,23,14,41] }]); </script> </body> </html>
#$filter和callee应用表格排序 <!DOCTYPEhtml> <html> <head> <Metacharset="UTF-8"> <title></title> <scripttype="text/javascript"src='js/angular.min.js'></script> <styletype="text/css"> .ng-cloak{display:none;} </style> </head> <bodyng-app="hd"ng-cloakclass="ng-cloak"> <divng-controller="ctrl"> <tableborder=""cellspacing=""cellpadding=""> <tr> <thng-click="sort('name')">名称</th> <thng-click="sort('num')">数量</th> <thng-click="sort('price')">价格</th> </tr> <trng-repeat="dindata"> <td>{{d.name}}</td> <td>{{d.num}}</td> <td>{{d.price}}</td> </tr> </table> </div> <scripttype="text/javascript"> varm=angular.module('hd',[]) m.controller('ctrl','$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} ] varstatus=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>
#全局变量保存状态 <!DOCTYPEhtml> <html> <head> <Metacharset="UTF-8"> <title></title> <scripttype="text/javascript"src='js/angular.min.js'></script> <styletype="text/css"> .ng-cloak{display:none;} </style> </head> <bodyng-app="hd"ng-cloakclass="ng-cloak"> <divng-controller="ctrl"> <tableborder="1"cellspacing=""cellpadding=""> <tr> <thng-click="sort('name')">名称</th> <thng-click="sort('num')">数量{{status}} <spanng-if="status">升序</span> <spanng-if="!status">降序</span> </th> <thng-click="sort('price')">价格</th> </tr> <trng-repeat="dindata"> <td>{{d.name}}</td> <td>{{d.num}}</td> <td>{{d.price}}</td> </tr> </table> </div> <scripttype="text/javascript"> varm=angular.module('hd','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,arguments.callee[field]) $scope.status=!$scope.status $scope.data=$filter('orderBy')($scope.data,$scope.status) } }]) </script> </body> </html>
#$watch监控某个变量 <!DOCTYPEhtml> <html> <head> <Metacharset="utf-8"/> <title></title> <scriptsrc="js/angular.min.js"></script> </head> <body> <divng-app="app"ng-controller="ctrl"> $watch:<inputtype="text"ng-model="title"/>{{err}} </div> <scripttype="text/javascript"> varm=angular.module('app',function($scope){ $scope.title='' //n为当前输入字符，o为上一次字符 $scope.$watch('title',function(n,o){ $scope.err=n.length>0?'':'不能为空'; }) }]); </script> </body> </html>
#$watch监控某个对象 <!DOCTYPEhtml> <html> <head> <Metacharset="UTF-8"> <title></title> <scripttype="text/javascript"src='js/angular.min.js'></script> <styletype="text/css"> .ng-cloak{display:none;} </style> </head> <bodyng-app="hd"ng-cloakclass="ng-cloak"> <divng-controller="ctrl"> 请输入姓名：<inputtype="text"ng-model="odata.name"/>{{err}} </div> <scripttype="text/javascript"> varm=angular.module('hd',$filter){ $scope.odata={'name':'cxiong','age':29}; $scope.$watch('odata.name',o){ $scope.err=n.length?'':'不能为空'; }); }]) </script> </body> </html>
#$watch和$filter实现排序和搜索框功能，自定义加*过滤器 <!DOCTYPEhtml> <html> <head> <Metacharset="UTF-8"> <title></title> <scripttype="text/javascript"src='js/angular.min.js'></script> <styletype="text/css"> .ng-cloak{display:none;} </style> </head> <bodyng-app="hd"ng-cloakclass="ng-cloak"> <divng-controller="ctrl"> 搜索框：<inputtype="text"ng-model="search"/> <tableborder="1"cellspacing=""cellpadding=""> <tr> <thng-click="sort('name')">名称</th> <thng-click="sort('num')">数量 <spanng-if="status">升序</span> <spanng-if="!status">降序</span> </th> <thng-click="sort('price')">价格</th> </tr> <trng-repeat="dintmp"> <td>{{d.name}}</td> <td>{{d.num}}</td> <td>{{d.price|truncate}}</td> </tr> </table> </div> <scripttype="text/javascript"> varm=angular.module('hd',[]); //自定义加*过滤器 m.filter('truncate',function(){ returnfunction(price){ returnString(parseInt(price/100))+'**元' } }) m.controller('ctrl','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,arguments.callee[field]) $scope.status=!$scope.status $scope.tmp=$filter('orderBy')($scope.data,$scope.status) } //搜索框功能 //过滤后数据。用于显示 $scope.tmp=$scope.data $scope.$watch('search',o){ $scope.tmp=$filter('filter')($scope.data,n) }) }]) </script> </body> </html>
