js 练习 球员
<!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" />
<!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" 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>
