<!DOCTYPE html>
<html ng-app='test'>
<head>
<meta charset="utf-8">
<title>angular</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
<script src="js/angular1.58.js" charset="utf-8"></script>
<script >
var app=angular.module('test',[]);
app.controller('zhangsan',function($scope){
$scope.arr=[1,52,22,33]
})
app.filter('my_filter',function(){
return function(input){
console.log(input)
return input+5
}
})
</script>
</head>
<body ng-controller='zhangsan'>
<div ng-repeat='v in arr'>
{{v | my_filter}}
</div>
</body>
</html>
核心
外层是初始化的，内层才是用来干活的
app.filter(name,function(){
alert（'外层函数'）
//此处套了2层，通过弹出1可以看出只执行了一次 ，作者目的是为了方便初始化
return function(input){
alert（’内层函数'）//用到几次就弹出几次即有几个数据就执行几次
console.log(input) //此处的input就是过滤器之前的数据
return input+5 // return input也是核心，返回处理结果
}
})
自定义会计能看懂的记账
<!DOCTYPE html>
<html ng-app='test'>
<head>
<meta charset="utf-8">
<title>angular</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
<script src="bower_components/angular/angular.js" charset="utf-8"></script>
<script >
var app=angular.module('test',[])
app.filter('kuaiji',function(){
return function(input){
if (input<0) {
return '('+(-input)+')'
}else {
return input
}
}
})
app.controller('zhangsan',function($scope,$http){
$scope.arr=[
{name:'买早餐',count:3,price:-8},
{name:'卖出字画',count:5,price:25},
{name:'请领导吃饭',count:2,price:-250}
]
})
</script>
</head>
<body ng-controller='zhangsan'>
<ul>
<li ng-repeat='v in arr'>{{v.name}} 数量：{{v.count}} 支出{{v.count*v.price |kuaiji}}</li>
</ul>
</body>
</html>
网友评论