球员信息

最新推荐文章于 2021-12-19 23:26:05 发布

Pink_空白格

最新推荐文章于 2021-12-19 23:26:05 发布

阅读量337

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/BoBrother/article/details/78319917

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>周考3球员信息</title>
<script type="text/javascript" src="js/angular.js"></script>
<style>
* {
margin: 0;
padding: 0;
}

table {
margin-top: 20px;
border-collapse: collapse;
}

td, th {
border: 1px solid #000;
padding: 20px;
text-align: center;
}

button {
border-radius: 5px;
border: 1px solid gainsboro;
background-color: orange;
color: white;
padding: 5px;
}

span {
width: 100px;
display: inline-block;
}

.age {
width: 20px;
height: 20px;
}
</style>
<script>
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
var data = [{"name": "张三", "pass": '控场后卫', "age": 11, "sex": 999, "check": false},
{"name": "李四", "pass": '大前锋', "age": 21, "sex": 888, "check": false},
{"name": "王五", "pass": '小前锋', "age": 23, "sex": 777, "check": false},
{"name": "赵六", "pass": '中锋', "age": 10, "sex": 666, "check": false},
{"name": "周七", "pass": '得分后卫', "age": 1, "sex": 777, "check": false}

];
data.predicate = '-age';//根据年龄倒叙
$scope.data = data;
//用来查询的字段
$scope.cxSearch;
$scope.cx = function (ziduan) {
console.log(ziduan);
console.log($scope.select);
$scope.cxSearch = ziduan;
}
//查询的方法
$scope.searchFifter = function (search) {
if ($scope.name != null || $scope.select != null || ($scope.startAge != null || $scope.endAge != null)) {
if ($scope.cxSearch == "name") {
if (search.name.indexOf($scope.name) != -1) {
return true;
} else {
return false;
}
} else if ($scope.cxSearch == "select") {
if (search.sex.indexOf($scope.select) != -1) {
return true;
} else {
return false;
}
} else if ($scope.cxSearch == "age") {
if ($scope.startAge < parseInt(search.age) && parseInt(search.age) < $scope.endAge || $scope.startAge == search.age || $scope.endAge == search.age) {
return true;
} else {
return false;
}
}
}
return true;
};

$scope.addshow = false;
//添加用户的方法
$scope.add = function () {
$scope.addshow = true;
}
$scope.submitAdd = function () {
if ($scope.addname == null || $scope.addpass == null || $scope.addage == null || $scope.addsex == null) {
alert("用户信息不可为空");
} else {
$scope.data.push({
"name": $scope.addname,
"pass": $scope.addpass,
"age": $scope.addage,
"sex": $scope.addsex,
"check": false
});
alert("提交成功");
$scope.addshow = false;
}

}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl" bgcolor="cadetblue" >
<center>
<tr>

<td >
<font color="maroon">查询</td>        
          
          
          
         
<td>排序</td>
</tr><br />

<input type="text"ng-model="name" ng-click="cx('name')"/>            

<select ng-model="Spiao" >
<option value="-sex">票数倒叙</option>
<option value="sex">票数正叙</option>
</select><br />
<button style="margin-top: 20px" ng-click="add()">新增球员</button>
<table bgcolor="blueviolet">
<thead bgcolor="chocolate">
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</thead>
<tbody>
<tr style="{{$even?'background-color: #f1f1f1':''}}" ng-repeat="item in data | filter:searchFifter:search | orderBy:Spiao" >

<td >{{item.name}}</td>
<td >{{item.pass}}</td>
<td >{{item.age}}</td>
<td >{{item.sex}}</td>
</tr>
</tbody>
</table>

<br>
<div ng-show="addshow">
<span>姓名:</span> <input type="text" ng-model="addname"><br>
<span>位置:</span><input type="text" ng-model="addpass"><br>
<span>球号:</span><input type="text" ng-model="addage"><br>
<span>票数:</span><input type="text" ng-model="addsex"><br>
<button style="margin-top: 30px" ng-click="submitAdd()">确认</button>
</div>
</center>
</body>

</html>