<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.addUser{
width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
}
</style>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addUser",{
templateUrl:"addUser.html",
controller:"addUserCtrl"
})
}]);
app.controller("myCtrl",function ($scope,$location) {
$scope.users = [
{"name": "张三", "zhi": "控球后卫", "hao": 11, "shu": 999,"state":false},
{"name": "李四", "zhi": "大前锋", "hao": 21, "shu": 888,"state":false},
{"name": "王五", "zhi": "小前锋", "hao": 23, "shu": 777,"state":false},
{"name": "赵六", "zhi": "中锋", "hao": 10, "shu": 666,"state":false},
{"name": "周七", "zhi": "得分后卫", "hao": 1, "shu": 555,"state":false}
];
$scope.goToUrl = function(url){
$location.path(url);
};
});
app.controller("addUserCtrl",function($scope){
$scope.a = "";
$scope.b = "";
$scope.c = "";
$scope.d = "";
//提交按钮的点击事件
$scope.tijiao = function(){
var flag = true;
//拿到各个输入框的值
if($scope.a==""||$scope.a==null){
alert("姓名不能为空");
flag = false;
}
if($scope.b==""||$scope.b==null){
alert("位置不能为空");
flag = false;
}
if($scope.c==""||$scope.c==null){
alert("球号不能为空");
flag = false;
}
if($scope.d==""||$scope.d==null){
alert("票数不能为空");
flag = false;
}
if(flag){
$scope.duixiang ={
name:$scope.a,
zhi:$scope.b,
hao:$scope.c,
shu:$scope.d,
state:false
};
$scope.users.push($scope.duixiang);
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>球员信息表</h3>
<div>
查询<input ng-model="search" placeholder="用户名查询" size="10">
排序<select id="shu" ng-model="b">
<option value="">票数倒序</option>
<option value="-">票数正序</option>
</select><br><br>
<button class="addUser" ng-click="goToUrl('/addUser')" style=" background:blue;">新增球员</button>
</div>
<div>
<table border="1" cellspacing="1" cellpadding="10">
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users|filter:{name:search}|orderBy:b+a">
<td>{{user.name}}</td>
<td>{{user.zhi}}</td>
<td>{{user.hao }}</td>
<td>{{user.shu}}</td>
</tr>
</tbody>
</table>
</div><br>
<div ng-view>
</div>
<!-- 1.添加用户页面 -->
<script type="text/ng-template" id="addUser.html">
<table border="1" cellpadding="10" cellspacing="1">
<tbody>
<tr>
<th>姓名:</th>
<td><input type="text" ng-model="a"></td>
</tr>
<tr>
<th>位置:</th>
<td><input type="text" ng-model="b"></td>
</tr>
<tr>
<th>球号:</th>
<td><input type="text" ng-model="c"></td>
</tr>
<tr>
<th>票数:</th>
<td><input type="text" ng-model="d"></td>
</tr>
<tr>
<tr align="center">
<td colspan="2">
<input type="button" value="提交" ng-click="tijiao()" />
</td>
</tr>
</tbody>
</table>
</script>
<!--指定相应内容-->
</center>
</body>
</html>
表单查询 排序 添加
最新推荐文章于 2022-05-25 16:42:32 发布