<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.goods = [
{"name":"张三","sex":"男","hobby":"游戏","jiguan":"北京"},
{"name":"李四","sex":"男","hobby":"游戏","jiguan":"北京"},
{"name":"王五","sex":"男","hobby":"游戏","jiguan":"北京"},
{"name":"赵柳","sex":"男","hobby":"游戏","jiguan":"北京"}];
$scope.checkall = false;
$scope.newname;
$scope.newsex;
$scope.newhobby;
$scope.newjiguan;
$scope.tianjia = function(){
var a = {};
a.name = $scope.newname;
a.sex = $scope.newsex;
a.hobby = $scope.newhobby;
a.jiguan=$scope.newjiguan;
$scope.goods.push(a);
}
$scope.delete = function(){
//获取所有选择的checkbox
var cks = $("input[type=checkbox]:checked");
for(var i=0;i<cks.length;i++){
var ck = cks[i];
var _name = ck.value;//得到要删除的商品的id
for(var j=0;j<$scope.goods.length;j++){//到数据源中找到和当前id匹配的商品，删除之
if($scope.goods[j].name == _name){
$scope.goods.splice(j,1);
break;
}
}
}
}
});
</script>
<style type="text/css">
table{
text-align: center;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.play{
margin-top: 3%;
}
.play1{
margin-top: 3%;
}
.play2{
margin-top: 3%;
}
.play3{
margin-top: 3%;
}
.play4{
margin-top: 3%;
}
.del{
margin-left: 250px;
}
.quan{
margin: left;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<br /><br />
<div ng-click="addIsShow">
姓名：<input type="text" ng-model="newname" class="play"/><br />
性别：<select ng-model="newsex" class="play1">
<option value="">男</option>
<option>女</option>
</select><br />
爱好：<select ng-model="newhobby" class="play2">
<option value="">吃饭</option>
<option>睡觉</option>
<option>打豆豆</option>
</select>
<br />
籍贯:<select ng-model="newjiguan" class="play3">
<option value="">北京</option>
<option>天津</option>
<option>上海</option>
</select>
<br />
<input type="button" value="注册" ng-click="tianjia();" class="play4" style="width: 100px; height: 50px; background: darkblue;"/><br />
</div>
<table width="400px" border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px" >
<tr style="background-color: grey;">
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
<td>籍贯</td>
<td><input type="checkbox" ng-model="checkall"/></td>
</tr>
<tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'red':'green'}}">
<td>{{g.name}}</td>
<td>{{g.sex}}</td>
<td>{{g.hobby}}</td>
<td>{{g.jiguan}}</td>
<td><input type="checkbox" value="{{g.name}}" ng-model="checkall" /></td>
</tr>
</table>
<button class="quan">全选/反选</button>
<button ng-click="delete();" class="del"/>批量删除</button>
</body>
</html>
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
