angularjs-$filter及callee,$watch

2025-02-15 技术教程

#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：{{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',['$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}]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',[])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监控某个变量<!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',[]);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监控某个对象<!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',[])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实现排序和搜索框功能，自定义加*过滤器<!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',['$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>