angularjs-$filter及callee,$watch-创新互联
#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>
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
标题名称：angularjs-$filter及callee,$watch-创新互联
URL标题：https://www.cdcxhl.com/article22/ccggjc.html
成都网站建设公司_创新互联，为您提供搜索引擎优化、企业建站、App设计、建站公司、域名注册、云服务器
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 焦作网站SEO优化排名选择关键词的方法 2023-10-07
- 网站建设:企业建站有哪些隐形需求 2023-08-26
- 一篇行业深度好文告诉你怎样区别外链的优劣 2021-04-21
- 建网站满足这些条件，加载就能再次提速 2022-08-05
- 满足用户需求可否为SEO优化带来好处？ 2015-11-06
- 设计追波风 2022-06-17
- 网站优化怎么做可以让搜索引擎友好对待？ 2015-12-08
- 现代人对于网站定制的要求 2023-03-18
- 小程序制作开发的注意事项有哪些？ 2022-07-07
- 菏泽网站优化：SEO排名网站建设布局 2023-08-30
- 白帽SEO有化可以短期快速出排名吗？ 2015-11-10
- 网页优化从哪些地方开始操作呢? 2023-04-06