angularJS1笔记-(6)-自定义过滤器
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> <ul> <!--这里用到了自定义的过滤器filterAge--> <li ng-repeat="user in data | filterAge"> {{user.name}} {{user.age}} {{user.city}} </li> </ul> </div> </div> <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script> <script type="text/javascript" src="app/index.js"></script> <script> </script> </body> </html>
js:
angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {
//注册service
$provide.service('Data', function () {
return [
{
name: "张三1",
age: 21,
city: "北京"
},
{
name: "张三2",
age: 22,
city: "北京"
},
{
name: "张三3",
age: 23,
city: "上海"
},
{
name: "张三4",
age: 24,
city: "北京"
},
];
});
//注册filter
$filterProvider.register('filterAge', function () {
return function (obj) {
var newObj = [];
angular.forEach(obj,function (o) {
//过滤出年龄大于22岁的
if(o.age>22){
newObj.push(o);
}
});
return newObj;
};
});
//注册controller
$controllerProvider.register('firstController', function ($scope, Data) {
$scope.data = Data;
});
});
运行结果：
补充:传多个参数的过滤器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器复习</title>
<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
</head>
<body ng-app="app">
<div>
<!--过滤器的参数就是前面穿进去的参数-->
<h1>{{ true | checkmark }}</h1>
<h1>{{ false | checkmark }}</h1>
<input type="text" placeholder="请输入你的体重" ng-model="yourWeight">
<h2>体重:{{yourWeight}}kg</h2>
<!--过滤器如果要传入第二个参数就在过滤器后面加一个:-->
<h2>评测:{{yourWeight|weightFilter:"张三"}}</h2>
</div>
<script>
angular.module('app', [])
.filter('checkmark', function () {
return function (input) {
return input ? '\u2713' : '\u2718';
}
})
.filter('weightFilter', function () {
return function (input,inputTwo) {
if (input < 50) {
return inputTwo + "偏瘦";
} else if (input >= 100) {
return inputTwo + "偏胖";
} else {
return inputTwo + "正常";
}
}
})
</script>
</body>
</html>
执行结果:
