angular 添加 批量删除 全选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.username=[{
ck:false,
id:1,
name:"张三",
age:"15",
sex:"男"
},{
ck:false,
id:2,
name:"李四",
age:"18",
sex:"女"
}];
//全选
$scope.qx=function(){
for(var i in $scope.username){
$scope.username[i].ck=$scope.all;
}
}
//删除
$scope.shan=function(clumn){
for(index in $scope.username){
if($scope.username[index].name==clumn){
$scope.username.splice(index,1);
}
 }
}
$scope.save=function(){
$scope.username.push({
id:$scope.add_id,
name:$scope.add_name,
age:$scope.add_age,
sex:$scope.add_sex,
});
}
  //批量删除
  $scope.del=function(){
  for(var i = 0;i<$scope.username.length;i++){
  //判断
  if($scope.username[i].ck==true){
  $scope.username.splice(i,1);
  i--;
  }
  }
  }
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table border="1px" cellpadding="10" cellspacing="1">
<button ng-click="del()">批量删除</button>
<tr>
<th><input type="checkbox" ng-model="all" ng-click="qx()"/></th>
<th>序号</th>
<th>用户名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>

<tr ng-repeat="s in username">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.id}}</td>
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.sex}}</td>
<td><button ng-click="shan(s.name)">删除</button></td>
</tr>
</table>
<div id="add">
ID:<input ng-model="add_id" />
<br />
用户名:<input ng-model="add_name" />
<br />
年龄:<input ng-model="add_age" />
<br />
性别:<input type="radio" value="男" checked="checked" ng-model="add_sex"/>男
<input type="radio" value="女" ng-model="add_sex" />女
<br />
<button ng-click="save()">添加</button>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/we1601r/article/details/79240447
今日推荐