您的位置：首页 > Web前端 > AngularJS

AngularJS自定义过滤器

2016-12-09 10:47 671 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
<script src="angular-1.5.8.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 800px;
margin: 100px auto 0;
}
.odd {
color: red;
}
.even {
color: blue;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl"ng-init="score=95">
<ul>
<li>请输入性别：<input type="text" ng-model="input"></li>
<li>请输入年龄：<input type="text" ng-model="input1"></li>
<li>请输入姓名：<input type="text" ng-model="input2"></li>
<li ng-repeat="item in data | filter: input | filter: {age: input1} | filter: {name: input2}" ng-class-odd="'odd'" ng-class-even="'even'">
<span>name: {{item.name}}</span>
<span>sex: {{item.sex}}</span>
<span>age: {{item.age}}</span>
</li>
</ul>
</div>

<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl", ["$scope", function (scope) {
scope.data = [
{'name':'Han','sex':'男','age': 22},
{'name':'Zhang','sex':'女','age': 23},
{'name':'Han','sex':'男','age': 0},
{'name':'Han','sex':'男','age': 22},
{'name':'Zhang','sex':'女','age': 23},
{'name':'Han','sex':'男','age': 0}
]
}]);
app.filter('myfilter', function () {
return function (input) {
var arr = [];
for (var i = 0; i < input.length; i++) {
if (input.sex == "男") {
arr.push(input[i]);
}
}
return arr;
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航