<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angualrjs/angular.min.js" ></script>
<script type="text/javascript" src="angualrjs/angular-route.min.js" ></script>
<script>
var app=angular.module("myApp",["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/addPlayer",{
controller:"addPlayerCtrl",
templateUrl:"addPlayer.html"
})
.otherwise({redirectTo:"/addPlayer"});
}]);
app.controller("myCtrl",function($scope){
$scope.users=[{name:"张三",pos:"控球后卫",num:11,piaoshu:999},
{name:"李四",pos:"大前锋",num:21,piaoshu:888},
{name:"王五",pos:"小前锋",num:23,piaoshu:777},
{name:"赵六",pos:"中锋",num:10,piaoshu:666},
{name:"周七",pos:"得分后卫",num:1,piaoshu:555}];
$scope.paixu = "-piaoshu";
$scope.goToUrl = function(){
$location.path("/addPlayer");
}
});
app.controller("addPlayerCtrl",function($scope){
$scope.name="";
$scope.pos="";
$scope.num="";
$scope.piaoshu="";
$scope.sub=function(){
var flag1=flag2=flag3=flag4=false;
if($scope.name==null || $scope.name==""){
alert("球员名不能为空");
flag1=false;
}else{
var flag=true;
for(user in $scope.users){
if($scope.users[user].name==$scope.name){
alert("重复");
flag = false;
flag1 = false;
}
}
if(flag){
flag1=true;
}else{
}
}
if($scope.pos==null || $scope.pos==""){
alert("位置不能为空");
flag2=false;
}else{
flag2=true;
}
if($scope.num==null || $scope.num==""){
alert("球号不能为空");
flag3=false;
}else{
flag3=true;
}
if($scope.piaoshu==null || $scope.piaoshu==""){
alert("票数不能为空");
flag4=false;
}else{
flag4=true;
}
if(flag1 && flag2 && flag3 && flag4){
var user={
name:$scope.name,
pos:$scope.pos,
num:$scope.num,
piaoshu:parseInt($scope.piaoshu)
}
$scope.users.push(user);
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table cellpadding="10" cellspacing="0">
<tr cellpadding="20" cellspacing="0">
<td>查询 </td>
<td>排序</td>
</tr>
<tr cellpadding="20" cellspacing="0">
<td><input type="text" ng-model="search"></td>
<td>
<select ng-model="paixu">
<option value="piaoshu">"--票数正序--"</option>
<option value="-piaoshu">"--票数倒序--"</option>
</select>
</td>
</tr>
</table>
<br>
<input type="button" id="btn" value="新增球员" style="background-color: #33CCFF;"/>
<br>
<br>
<table border="1 solid black" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody id="tbody">
<tr ng-repeat="user in users | filter:search | orderBy:paixu">
<td>{{user.name}}</td>
<td>{{user.pos}}</td>
<td>{{user.num}}</td>
<td>{{user.piaoshu}}</td>
</tr>
</tbody>
</table>
<div ng-view>
</div>
</center>
<script type="text/ng-template" id="addPlayer.html">
<form>
姓名:<input type="text" ng-model="name"/><br/>
位置:<input type="text" ng-model="pos"/><br />
球号:<input type="text" ng-model="num"/><br />
票数:<input type="text" ng-model="piaoshu"/><br />
<input type="button" value="添加" ng-click="sub()"/>
</form>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angualrjs/angular.min.js" ></script>
<script type="text/javascript" src="angualrjs/angular-route.min.js" ></script>
<script>
var app=angular.module("myApp",["ngRoute"]);
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/addPlayer",{
controller:"addPlayerCtrl",
templateUrl:"addPlayer.html"
})
.otherwise({redirectTo:"/addPlayer"});
}]);
app.controller("myCtrl",function($scope){
$scope.users=[{name:"张三",pos:"控球后卫",num:11,piaoshu:999},
{name:"李四",pos:"大前锋",num:21,piaoshu:888},
{name:"王五",pos:"小前锋",num:23,piaoshu:777},
{name:"赵六",pos:"中锋",num:10,piaoshu:666},
{name:"周七",pos:"得分后卫",num:1,piaoshu:555}];
$scope.paixu = "-piaoshu";
$scope.goToUrl = function(){
$location.path("/addPlayer");
}
});
app.controller("addPlayerCtrl",function($scope){
$scope.name="";
$scope.pos="";
$scope.num="";
$scope.piaoshu="";
$scope.sub=function(){
var flag1=flag2=flag3=flag4=false;
if($scope.name==null || $scope.name==""){
alert("球员名不能为空");
flag1=false;
}else{
var flag=true;
for(user in $scope.users){
if($scope.users[user].name==$scope.name){
alert("重复");
flag = false;
flag1 = false;
}
}
if(flag){
flag1=true;
}else{
}
}
if($scope.pos==null || $scope.pos==""){
alert("位置不能为空");
flag2=false;
}else{
flag2=true;
}
if($scope.num==null || $scope.num==""){
alert("球号不能为空");
flag3=false;
}else{
flag3=true;
}
if($scope.piaoshu==null || $scope.piaoshu==""){
alert("票数不能为空");
flag4=false;
}else{
flag4=true;
}
if(flag1 && flag2 && flag3 && flag4){
var user={
name:$scope.name,
pos:$scope.pos,
num:$scope.num,
piaoshu:parseInt($scope.piaoshu)
}
$scope.users.push(user);
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<table cellpadding="10" cellspacing="0">
<tr cellpadding="20" cellspacing="0">
<td>查询 </td>
<td>排序</td>
</tr>
<tr cellpadding="20" cellspacing="0">
<td><input type="text" ng-model="search"></td>
<td>
<select ng-model="paixu">
<option value="piaoshu">"--票数正序--"</option>
<option value="-piaoshu">"--票数倒序--"</option>
</select>
</td>
</tr>
</table>
<br>
<input type="button" id="btn" value="新增球员" style="background-color: #33CCFF;"/>
<br>
<br>
<table border="1 solid black" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody id="tbody">
<tr ng-repeat="user in users | filter:search | orderBy:paixu">
<td>{{user.name}}</td>
<td>{{user.pos}}</td>
<td>{{user.num}}</td>
<td>{{user.piaoshu}}</td>
</tr>
</tbody>
</table>
<div ng-view>
</div>
</center>
<script type="text/ng-template" id="addPlayer.html">
<form>
姓名:<input type="text" ng-model="name"/><br/>
位置:<input type="text" ng-model="pos"/><br />
球号:<input type="text" ng-model="num"/><br />
票数:<input type="text" ng-model="piaoshu"/><br />
<input type="button" value="添加" ng-click="sub()"/>
</form>
</script>
</body>
</html>