添加

最新推荐文章于 2024-11-14 07:45:00 发布

原创最新推荐文章于 2024-11-14 07:45:00 发布 · 330 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
<span>
查询
</span>
<input type="text" ng-model="search" />
<span>
排序
</span>
<select ng-model="sort" ng-change="fun()">
<option>票数倒序</option>
<option>票数正序</option>
</select><br />
<button ng-click="add()" style="background-color: #0A9DC7;">新增球员</button>

<table border="1" cellspacing="0" cellpadding="1" width="400px" class="table-striped">
<tr style="background: #666666;">
<td>姓名</td>
<td>位置</td>
<td>球号</td>
<td>票数</td>
</tr>
<tbody >
<tr ng-repeat="p in data|filter:search2|orderBy:'ps':revers">
<td>{{p.name}}</td>
<td>{{p.wz}}</td>
<td>{{p.num}}</td>
<td>{{p.ps}}</td>
</tr>
</tbody>
</table>
<table ng-show="show">
<tr>
<td>姓名</td>
<td><input type="text" ng-model="name"></td>
</tr>
<tr>
<td>位置</td>
<td><input type="text" ng-model="wz"></td>
</tr>
<tr>
<td>球号</td>
<td><input type="text" ng-model="num"></td>
</tr>
<tr>
<td>票数</td>
<td><input type="text" ng-model="ps"></td>
</tr>
<tr>
<td colspan="2"><button ng-click="push()">添加</button></td>
</tr>
</table>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
$scope.data = [{
name: "张三",
wz: "控球后卫",
num: "11",
ps: "999"
}, {
name: "李四",
wz: "大前锋",
num: "21",
ps: "888"
}, {
name: "王五",
wz: "小前锋",
num: "23",
ps: "777"
}, {
name: "赵六",
wz: "中锋",
num: "10",
ps: "666"
}, {
name: "周七",
wz: "得分后卫",
num: "1",
ps: "555"
}];

$scope.search="";
$scope.search2="";
$scope.$watch("search",function(value){
if(value.indexOf("三")!=-1){
alert("包含敏感字");
$scope.search="";

}else{
$scope.search2=$scope.search;
}
});

$scope.fun = function() {
if ($scope.sort == "票数倒序") {

$scope.revers = true;
} else if ($scope.sort == "票数正序") {
$scope.revers = false;
}
};
$scope.show=false;
$scope.add=function(){
$scope.show=true;
};
$scope.push=function(){
for (var i = 0; i < $scope.data.length; i++) {
if($scope.name==$scope.data[i].name){
alert("重复");
return;
}
}

$scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps});
};

});
</script>
</body>

</html>