angularjs-$filter及callee,$watch
发布时间：2020-12-17 08:59:16 所属栏目：安全 来源：网络整理
导读：#angularjs常用过滤器!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/titlescriptsrc="js/angular.min.js"/script/headbodydivng-app="app"ng-controller="ctrl"货币currency：{{999.99|currency:'$':1}}br/数字number：{{999.111|number:2}}br/大写lowerca
#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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |