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 />
數(shù)字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時(shí)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應(yīng)用表格排序
<!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')">數(shù)量</th>
<th ng-click="sort('price')">價(jià)格</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 全局存放靜態(tài)變量
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>#全局變量保存狀態(tài)
<!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')">數(shù)量 `status`
<span ng-if="status">升序</span>
<span ng-if="!status">降序</span>
</th>
<th ng-click="sort('price')">價(jià)格</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 全局存放靜態(tài)變量
// 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監(jiān)控某個(gè)變量
<!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為當(dāng)前輸入字符，o為上一次字符
$scope.$watch('title',function(n,o){
$scope.err=n.length>0?'':'不能為空';
})
}]);
</script>
</body>
</html>#$watch監(jiān)控某個(gè)對(duì)象
<!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">
請(qǐng)輸入姓名：<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實(shí)現(xiàn)排序和搜索框功能，自定義加*過濾器
<!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')">數(shù)量
<span ng-if="status">升序</span>
<span ng-if="!status">降序</span>
</th>
<th ng-click="sort('price')">價(jià)格</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 全局存放靜態(tài)變量
// 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)
}
//搜索框功能
//過濾后數(shù)據(jù)。用于顯示
$scope.tmp=$scope.data
$scope.$watch('search',function(n,o){
$scope.tmp=$filter('filter')($scope.data,n)
})
}])
</script>
</body>
</html>
網(wǎng)站欄目：angularjs-$filter及callee,$watch
地址分享：http://bm7419.com/article24/jceice.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、建站公司、網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、App開發(fā)、品牌網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
移動(dòng)網(wǎng)站建設(shè)知識(shí)
- 移動(dòng)網(wǎng)站建設(shè)時(shí)這些問題千萬不能出現(xiàn)！ 2021-04-28
- 深圳移動(dòng)網(wǎng)站建設(shè)，pc端網(wǎng)站和手機(jī)端網(wǎng)站有哪些不同？ 2021-11-15
- 移動(dòng)網(wǎng)站建設(shè)需要考慮哪些問題？ 2016-01-07
- 移動(dòng)網(wǎng)站建設(shè)需要注意的問題 2014-10-25
- 成都移動(dòng)網(wǎng)站建設(shè)注意事項(xiàng)有哪些? 2020-08-18
- 移動(dòng)網(wǎng)站建設(shè)的注意事項(xiàng) 2014-09-22
- 現(xiàn)在做移動(dòng)網(wǎng)站建設(shè)的優(yōu)勢(shì)是什么呢？ 2022-12-16
- 移動(dòng)網(wǎng)站建設(shè)過程有哪些地方需要重視呢 2021-12-11
- 企業(yè)為什么要做好移動(dòng)網(wǎng)站建設(shè) 2023-03-27
- 移動(dòng)網(wǎng)站建設(shè)：從瀏覽者的角度提出幾點(diǎn)優(yōu)化建議 2021-07-26
- 手機(jī)、移動(dòng)網(wǎng)站建設(shè)如何把握設(shè)計(jì)要點(diǎn) 2022-05-23
- 移動(dòng)網(wǎng)站建設(shè)需要考慮哪些問題？ 2022-11-29