<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 50px;
}
* {
padding: 0px;
margin: 0px auto;
margin-top: 50px;
}
</style>
<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
</head>
<body ng-app="c1" ng-controller="cr1">
<table border="1px" id="tab" cellpadding="0px" cellspacing="0px" height="150px">
<tr align="center">
<th>
<input type="button" value="全选 /全不选 " ng-click="box_checked()" />
</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center">
<td><input type="button" value="批量删除" ng-click="dl()" /></td>
<td><input type="text" placeholder="请输入用户名" id="se" ng-model="sname" /></td>
<td><input type="text" placeholder="请输入年龄" id="sa" ng-model="sage" /></td>
<td><input type="text" placeholder="请输入性别" id="ss" ng-model="ssex" /></td>
<td><input type="button" value="添加" ng-click="sadd()" id="add" /></td>
</tr>
<tr ng-repeat="stu in student" align="center">
<td><input type="checkbox" ng-click="tt($index)" ng-model="cd"></td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.sex}}</td>
<td><input type="button" value="删除" ng-click="btn($index)"></td>
</tr>
</table>
</body>
<script>
//创建模块
var als = angular.module("c1", []);
//创建控制器
als.controller("cr1", function($scope) {
$scope.student = [{
"name": "张三",
"age": 18,
"sex": "男",
"flag": false
}, {
"name": "李四",
"age": 28,
"sex": "男",
"flag": false
}, {
"name": "王晓华",
"age": 20,
"sex": "女",
"flag": false
}, {
"name": "赵六",
"age": 17,
"sex": "男",
"flag": false
}]
$scope.tt = function($index) {
$scope.student[$index].flag = !$scope.student[$index].flag;
}
$scope.box_checked = function() {
var f = document.getElementsByTagName("input")
for(var i = 0; i < f.length - 1; i++) {
if(f[i].type == "checkbox") {
f[i].checked = !f[i].checked;
}
}
for(var i = 0; i < $scope.student.length; i++) {
$scope.student[i].flag = !$scope.student[i].flag;
}
}
$scope.sadd = function() {
var ss = {
"name": $scope.sname,
"age": $scope.sage,
"sex": $scope.ssex,
"flag": $scope.flag
}
$scope.student.push(ss);
}
$scope.btn = function($index) {
$scope.student.splice($index, 1)
}
$scope.dl = function() {
for(var i = $scope.student.length - 1; i >= 0; i--) {
if($scope.student[i].flag) {
$scope.student.splice(i, 1);
}
}
}
})
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 50px;
}
* {
padding: 0px;
margin: 0px auto;
margin-top: 50px;
}
</style>
<script type="text/javascript" src="angular-1.5.5/angular.min.js"></script>
</head>
<body ng-app="c1" ng-controller="cr1">
<table border="1px" id="tab" cellpadding="0px" cellspacing="0px" height="150px">
<tr align="center">
<th>
<input type="button" value="全选 /全不选 " ng-click="box_checked()" />
</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr align="center">
<td><input type="button" value="批量删除" ng-click="dl()" /></td>
<td><input type="text" placeholder="请输入用户名" id="se" ng-model="sname" /></td>
<td><input type="text" placeholder="请输入年龄" id="sa" ng-model="sage" /></td>
<td><input type="text" placeholder="请输入性别" id="ss" ng-model="ssex" /></td>
<td><input type="button" value="添加" ng-click="sadd()" id="add" /></td>
</tr>
<tr ng-repeat="stu in student" align="center">
<td><input type="checkbox" ng-click="tt($index)" ng-model="cd"></td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.sex}}</td>
<td><input type="button" value="删除" ng-click="btn($index)"></td>
</tr>
</table>
</body>
<script>
//创建模块
var als = angular.module("c1", []);
//创建控制器
als.controller("cr1", function($scope) {
$scope.student = [{
"name": "张三",
"age": 18,
"sex": "男",
"flag": false
}, {
"name": "李四",
"age": 28,
"sex": "男",
"flag": false
}, {
"name": "王晓华",
"age": 20,
"sex": "女",
"flag": false
}, {
"name": "赵六",
"age": 17,
"sex": "男",
"flag": false
}]
$scope.tt = function($index) {
$scope.student[$index].flag = !$scope.student[$index].flag;
}
$scope.box_checked = function() {
var f = document.getElementsByTagName("input")
for(var i = 0; i < f.length - 1; i++) {
if(f[i].type == "checkbox") {
f[i].checked = !f[i].checked;
}
}
for(var i = 0; i < $scope.student.length; i++) {
$scope.student[i].flag = !$scope.student[i].flag;
}
}
$scope.sadd = function() {
var ss = {
"name": $scope.sname,
"age": $scope.sage,
"sex": $scope.ssex,
"flag": $scope.flag
}
$scope.student.push(ss);
}
$scope.btn = function($index) {
$scope.student.splice($index, 1)
}
$scope.dl = function() {
for(var i = $scope.student.length - 1; i >= 0; i--) {
if($scope.student[i].flag) {
$scope.student.splice(i, 1);
}
}
}
})
</script>
效果
</html>