<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<script src="../angular-1.5.5/angular-route.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.xm="";
$scope.wz="";
$scope.nl="";
$scope.qd="";
$scope.age="";
$scope.addgoods=function () {
$scope.users.push({name:$scope.xm,wz:$scope.wz,age:$scope.nl,qd:$scope.qd,url:"images/1.png"});
}
$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.ageFilter=function (item) {
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) {
user.page++;
}
})
</script>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>姓名:</span><input type="text" ng-model="xm"/><br/>
<span>位置:</span><input type="text" ng-model="wz"/><br/>
<span>年龄:</span><input type="text" ng-model="nl"/><br/>
<span>球队:</span><input type="text" ng-model="qd"/><br/>
<button ng-click="addgoods()">添加新球员</button>
<p>用户信息表</p>
<input placeholder="用户名查询" size="10" ng-model="xmFilter">
年龄<select ng-model="ageSize">
<option>--请选择--</option>
<option>1-10</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
<table border="1" cellpadding="10">
<tr>
<th>球员</th>
<th>姓名</th>
<th>位置</th>
<th>年龄</th>
<th>球队</th>
<th>得票数</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in users|filter:ageFilter|filter:xmFilter">
<td><img src="{{item.url}}"></td>
<td>{{item.name}}</td>
<td>{{item.wz}}</td>
<td>{{item.age}}</td>
<td>{{item.qd}}</td>
<td>{{item.page}}</td>
<td><button ng-click="add(item)">投票</button></td>
</tr>
</table>
</body>
</html>