| <!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>Title</title> |
| |
<style> |
| |
table{ |
| |
border-collapse: collapse; |
| |
} |
| |
</style> |
| |
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> |
| |
<script> |
| |
var myapp=angular.module("myapp",[]); |
| |
myapp.controller("myCtrl",function($scope){ |
| |
$scope.users=[ |
| |
{ |
| |
'url':"images/1.png", |
| |
'name':"Westbrook", |
| |
'wz':"得分后卫（SG）", |
| |
"age":24, |
| |
"qd":"雷霆", |
| |
"page":1900 |
| |
}, |
| |
{ |
| |
'url':"images/2.png", |
| |
'name':"James", |
| |
'wz':"大前锋（PF）", |
| |
"age":23, |
| |
"qd":"骑士", |
| |
"page":1900 |
| |
}, |
| |
{ |
| |
'url':"images/3.png", |
| |
'name':"Curry", |
| |
'wz':"得分后卫（SG）", |
| |
"age":30, |
| |
"qd":"勇士", |
| |
"page":1800 |
| |
}, |
| |
{ |
| |
'url':"images/4.png", |
| |
'name':"Harden", |
| |
'wz':"小前锋（SG）", |
| |
"age":13, |
| |
"qd":"火箭", |
| |
"page":1800 |
| |
}, |
| |
{ |
| |
'url':"images/5.png", |
| |
'name':"Durant", |
| |
'wz':"得分后卫（SG）", |
| |
"age":35, |
| |
"qd":"勇士", |
| |
"page":1712 |
| |
} |
| |
]; |
| |
//年龄范围过滤 |
| |
$scope.ageSize="--请选择--"; |
| |
$scope.fun=function(){ |
| |
console.log($scope.ageSize); |
| |
}; |
| |
$scope.ageFilter=function(item){ |
| |
//console.log(item.age); |
| |
if($scope.ageSize!="--请选择--"){ |
| |
var ageSize=$scope.ageSize; |
| |
var ageArr=ageSize.split("-"); |
| |
var min=ageArr[0]; |
| |
var max=ageArr[1]; |
| |
var age=item.age; |
| |
if(age>max||age<min){ |
| |
return false |
| |
}else{ |
| |
return true; |
| |
} |
| |
}else{ |
| |
return true; |
| |
} |
| |
|
| |
}; |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
$scope.add=function(user){ |
| |
console.log(user); |
| |
user.page++; |
| |
}; |
| |
$scope.addNew=function(){ |
| |
$scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,"age":$scope.age,"qd":$scope.team,"page":0}) |
| |
}; |
| |
}) |
| |
</script> |
| |
</head> |
| |
<body ng-app="myapp" ng-controller="myCtrl"> |
| |
<div> |
| |
<h2>添加新球员</h2> |
| |
<div>姓名:<input type="text" ng-model="name"></div> |
| |
<div>位置:<input type="text" ng-model="wz"></div> |
| |
<div>年龄:<input type="text" ng-model="age"></div> |
| |
<div>球队:<input type="text" ng-model="team"></div> |
| |
<button ng-click="addNew()">添加新球员</button> |
| |
</div> |
| |
<h3>用户信息表</h3> |
| |
<div> |
| |
<input placeholder="用户名查询" size="10" /> |
| |
|
| |
年龄： |
| |
<select ng-model="ageSize"> |
| |
<option>--请选择--</option> |
| |
<option>11-20</option> |
| |
<option>21-30</option> |
| |
<option>31-40</option> |
| |
<option>41-50</option> |
| |
<option>51-60</option> |
| |
</select> |
| |
</div> |
| |
<div> |
| |
<table border="1" cellpadding="10"> |
| |
<thead> |
| |
<tr> |
| |
<th>球员</th> |
| |
<th>姓名</th> |
| |
<th>位置</th> |
| |
<th>年龄</th> |
| |
<th>球队</th> |
| |
<th>得票数</th> |
| |
<th>操作</th> |
| |
</tr> |
| |
</thead> |
| |
<tbody> |
| |
<tr ng-repeat="user in users|filter:ageFilter" > |
| |
<td><img src="{{user.url}}"></td> |
| |
<td>{{user.name}}</td> |
| |
<td>{{user.wz }}</td> |
| |
<td>{{user.age}}</td> |
| |
<td>{{user.qd }}</td> |
| |
<td>{{user.page}}</td> |
| |
<td><button ng-click="add(user)">投票</button></td> |
| |
</tr> |
| |
</tbody> |
| |
</table> |
| |
</div> |
| |
</body> |
| |
</html> |