index3
来源：互联网 发布：淘宝上的黄金能买吗 编辑：程序博客网 时间：2024/06/05 20:04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
th{
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
background: gray;
}
td{
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
}
.font{
background: red;
}
</style>
<script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
table{
border-collapse: collapse;
}
th{
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
background: gray;
}
td{
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
}
.font{
background: red;
}
</style>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope,$http) {
// $scope.items=[
// { name:'张三',weizhi:'控球后卫',num:11,count:999,check:false},
// { name:'李四',weizhi:'大前锋',num:21,count:888,check:false},
// { name:'王五',weizhi:'小前锋',num:23,count:777,check:false},
// { name:'赵六',weizhi:'中锋',num:40,count:666,check:false},
// { name:'周七',weizhi:'得分后卫',num:1,count:555,check:false}
// ];
//请求数据
$http({
url:"package.json",
method:"GET"
}).then(function (data) {
$scope.items=data.data;
});
$scope.update_hides=false;
$scope.Tou=true;
//年龄范围过滤
$scope.ageTest = function(num, numSize) {
//alert(ageSize);
//alert(age);
if(numSize != "--请选择--") {
var agess = numSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if(num < ageMin || num > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
};
$scope.search="";
$scope.search2="";
$scope.$watch("search",function (value) {
if(value.indexOf("枪")!=-1){
alert("您输入的是敏感字");
$scope.search="";
}else{
$scope.search2=$scope.search;
}
});
//按票数正序或倒序
$scope.revers=false;
$scope.sort="--请选择--";
$scope.fun=function () {
if($scope.sort!="--请选择--"){
if($scope.sort=="票数倒序"){
$scope.revers=true;
}else if($scope.sort=="票数正序"){
$scope.revers=false;
}
}
};
//点击全选
$scope.CheckAll=function () {
if($scope.AllCheck==true){
for(var i=0;i<$scope.items.length;i++){
$scope.items[i].check=true;
}
}else{
for(var i=0;i<$scope.items.length;i++){
$scope.items[i].check=false;
}
}
};
myapp.controller("myCtrl",function ($scope,$http) {
// $scope.items=[
// { name:'张三',weizhi:'控球后卫',num:11,count:999,check:false},
// { name:'李四',weizhi:'大前锋',num:21,count:888,check:false},
// { name:'王五',weizhi:'小前锋',num:23,count:777,check:false},
// { name:'赵六',weizhi:'中锋',num:40,count:666,check:false},
// { name:'周七',weizhi:'得分后卫',num:1,count:555,check:false}
// ];
//请求数据
$http({
url:"package.json",
method:"GET"
}).then(function (data) {
$scope.items=data.data;
});
$scope.update_hides=false;
$scope.Tou=true;
//年龄范围过滤
$scope.ageTest = function(num, numSize) {
//alert(ageSize);
//alert(age);
if(numSize != "--请选择--") {
var agess = numSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if(num < ageMin || num > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
};
$scope.search="";
$scope.search2="";
$scope.$watch("search",function (value) {
if(value.indexOf("枪")!=-1){
alert("您输入的是敏感字");
$scope.search="";
}else{
$scope.search2=$scope.search;
}
});
//按票数正序或倒序
$scope.revers=false;
$scope.sort="--请选择--";
$scope.fun=function () {
if($scope.sort!="--请选择--"){
if($scope.sort=="票数倒序"){
$scope.revers=true;
}else if($scope.sort=="票数正序"){
$scope.revers=false;
}
}
};
//点击全选
$scope.CheckAll=function () {
if($scope.AllCheck==true){
for(var i=0;i<$scope.items.length;i++){
$scope.items[i].check=true;
}
}else{
for(var i=0;i<$scope.items.length;i++){
$scope.items[i].check=false;
}
}
};
$scope.itemsCheck=function () {
var flag=0;
for(var i=0;i<$scope.items.length;i++){
if($scope.items[i].check==true){
flag++;
}else{
flag--;
}
}
if(flag==$scope.items.length){
$scope.AllCheck=true;
}else{
$scope.AllCheck=false;
}
};
//添加
$scope.add=function () {
$scope.ishide=true;
};
var flag=0;
for(var i=0;i<$scope.items.length;i++){
if($scope.items[i].check==true){
flag++;
}else{
flag--;
}
}
if(flag==$scope.items.length){
$scope.AllCheck=true;
}else{
$scope.AllCheck=false;
}
};
//添加
$scope.add=function () {
$scope.ishide=true;
};
$scope.k_name="";
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
$scope.tijiao=function (name,weizhi,num,count) {
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
$scope.tijiao=function (name,weizhi,num,count) {
if($scope.k_name==""||$scope.k_name){
alert("输入的内容不能为空");
}else{
alert("输入的内容不能为空");
}else{
for(var i=0;i<$scope.items.length;i++){
if($scope.k_name==$scope.items[i].name){
alert("以存在");
$scope.k_name="";
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
return;
}
}
$scope.items.push({
name:name,weizhi:weizhi,num:num,count:count
});
}
if($scope.k_name==$scope.items[i].name){
alert("以存在");
$scope.k_name="";
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
return;
}
}
$scope.items.push({
name:name,weizhi:weizhi,num:num,count:count
});
}
$scope.k_name="";
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
$scope.ishide=false;
};
//点击修改
//接收修改的索引
$scope.newIndex=0;
$scope.k_weizhi="";
$scope.k_num="";
$scope.k_count="";
$scope.ishide=false;
};
//点击修改
//接收修改的索引
$scope.newIndex=0;
// $scope.names="";
// $scope.weizhi="";
// $scope.qiuhao="";
// $scope.piaoshu="";
// $scope.weizhi="";
// $scope.qiuhao="";
// $scope.piaoshu="";
$scope.update=function (index,name,weizhi,num,count) {
$scope.update_hides=true;
$scope.names=name;
$scope.weizhi=weizhi;
$scope.qiuhao=num;
$scope.piaoshu=count;
$scope.update_hides=true;
$scope.names=name;
$scope.weizhi=weizhi;
$scope.qiuhao=num;
$scope.piaoshu=count;
};
$scope.newUpdate=function (name,weizhi,num,count) {
$scope.newUpdate=function (name,weizhi,num,count) {
$scope.items[$scope.newIndex].name=name;
$scope.items[$scope.newIndex].weizhi=weizhi;
$scope.items[$scope.newIndex].num=num;
$scope.update_hides=false;
$scope.items[$scope.newIndex].weizhi=weizhi;
$scope.items[$scope.newIndex].num=num;
$scope.update_hides=false;
};
//批量删除
$scope.piL=function (index) {
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].check==true) { //选中的
$scope.items.splice($scope.items.indexOf($scope.items[i]), 1);
i--;
}
}
//判断if全选那么把表头隐藏
if($scope.AllCheck==true){
//批量删除
$scope.piL=function (index) {
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].check==true) { //选中的
$scope.items.splice($scope.items.indexOf($scope.items[i]), 1);
i--;
}
}
//判断if全选那么把表头隐藏
if($scope.AllCheck==true){
document.getElementsByTagName("table")[0].innerHTML="";
}
};
//清空数据
$scope.AllDelete=function () {
$scope.items=[];
$scope.Tou=false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search" placeholder="模糊查询">
按球号字段<select ng-model="numSize" ng-init="numSize='--请选择--'">
<option>--请选择--</option>
<option>1-10</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
按票数排序<select ng-model="sort" ng-change="fun()">
<option>--请选择--</option>
<option>票数倒序</option>
<option>票数正序</option>
</select>
<button ng-click="piL($index)">批量删除</button>
<button ng-click="AllDelete()">清空数据</button>
<br>
<button ng-click="add()" style="width: 120px;height: 30px;line-height: 30px;text-align: center;background: skyblue">添加</button>
<div ng-show="ishide">
<input type="text" ng-model="k_name" placeholder="请输入姓名"><br>
<input type="text" ng-model="k_weizhi" placeholder="请输入位置"><br>
<input type="text" ng-model="k_num" placeholder="请输入球号"><br>
<input type="text" ng-model="k_count" placeholder="请输入票数">
<button ng-click="tijiao(k_name,k_weizhi,k_num,k_count)">提交</button>
</div>
<table>
<thead ng-show="Tou">
<tr>
<th><input type="checkbox" ng-model="AllCheck" ng-click="CheckAll()"></th>
<th ng-click="mysort('name')" ng-class="red('name')">姓名</th>
<th ng-click="mysort('weizhi' ng-class=red('weizhi')">位置</th>
<th ng-click="mysort('num')" ng-class="red('num')">球号</th>
<th ng-click="mysort('count')" ng-class="red('count')">票数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items|filter:search2|orderBy:'count' :revers" ng-if="ageTest(x.num,numSize)">
<td><input type="checkbox" ng-model="x.check" ng-click="itemsCheck()"></td>
<td>{{x.name}}</td>
<td>{{x.weizhi}}</td>
<td>{{x.num}}</td>
<td>{{x.count}}</td>
<td><button ng-click="update($index,x.name,x.weizhi,x.num,x.count)">修改</button></td>
</tr>
</tbody>
</table>
}
};
//清空数据
$scope.AllDelete=function () {
$scope.items=[];
$scope.Tou=false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="search" placeholder="模糊查询">
按球号字段<select ng-model="numSize" ng-init="numSize='--请选择--'">
<option>--请选择--</option>
<option>1-10</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
按票数排序<select ng-model="sort" ng-change="fun()">
<option>--请选择--</option>
<option>票数倒序</option>
<option>票数正序</option>
</select>
<button ng-click="piL($index)">批量删除</button>
<button ng-click="AllDelete()">清空数据</button>
<br>
<button ng-click="add()" style="width: 120px;height: 30px;line-height: 30px;text-align: center;background: skyblue">添加</button>
<div ng-show="ishide">
<input type="text" ng-model="k_name" placeholder="请输入姓名"><br>
<input type="text" ng-model="k_weizhi" placeholder="请输入位置"><br>
<input type="text" ng-model="k_num" placeholder="请输入球号"><br>
<input type="text" ng-model="k_count" placeholder="请输入票数">
<button ng-click="tijiao(k_name,k_weizhi,k_num,k_count)">提交</button>
</div>
<table>
<thead ng-show="Tou">
<tr>
<th><input type="checkbox" ng-model="AllCheck" ng-click="CheckAll()"></th>
<th ng-click="mysort('name')" ng-class="red('name')">姓名</th>
<th ng-click="mysort('weizhi' ng-class=red('weizhi')">位置</th>
<th ng-click="mysort('num')" ng-class="red('num')">球号</th>
<th ng-click="mysort('count')" ng-class="red('count')">票数</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in items|filter:search2|orderBy:'count' :revers" ng-if="ageTest(x.num,numSize)">
<td><input type="checkbox" ng-model="x.check" ng-click="itemsCheck()"></td>
<td>{{x.name}}</td>
<td>{{x.weizhi}}</td>
<td>{{x.num}}</td>
<td>{{x.count}}</td>
<td><button ng-click="update($index,x.name,x.weizhi,x.num,x.count)">修改</button></td>
</tr>
</tbody>
</table>
<div ng-if="update_hides">
<h1>修改框</h1>
<table>
<tr>
<th>用户名：<input type="text" ng-model="names"></th>
</tr>
<tr style="width: 100%">
<th>位置：<input type="text" ng-model="weizhi"></th>
</tr>
<tr>
<th>球号：<input type="text" ng-model="qiuhao"></th>
</tr>
<tr>
<th>票数：<input type="text" ng-model="piaoshu"></th>
</tr>
<tr>
<th><button style="width: 100%" ng-click="newUpdate(names,weizhi,qiuhao,piaoshu)">提交</button></th>
</tr>
</table>
</div>
</body>
</html>
<h1>修改框</h1>
<table>
<tr>
<th>用户名：<input type="text" ng-model="names"></th>
</tr>
<tr style="width: 100%">
<th>位置：<input type="text" ng-model="weizhi"></th>
</tr>
<tr>
<th>球号：<input type="text" ng-model="qiuhao"></th>
</tr>
<tr>
<th>票数：<input type="text" ng-model="piaoshu"></th>
</tr>
<tr>
<th><button style="width: 100%" ng-click="newUpdate(names,weizhi,qiuhao,piaoshu)">提交</button></th>
</tr>
</table>
</div>
</body>
</html>
