Angular Js 里面table, checkbox制作可多选，单选的表格
Angular Js 里面table, checkbox制作可多选，单选的表格
查看别人的方法再加拓展，忘记了原博客地址；
主要实现主表格里面可以展开子表，子表的信息可以多选也可以单选，并绑定数据，算是三级选中吧？；
复选框只有两个值：true或者false，因此在AngularJS中，一般都是将复选框的ng-model绑定为一个布尔值属性，通过这两个布尔值来决定其勾选状态，以及通过其勾选状态来设置被绑定的属性值为true或false。我们来看以下示例：
图片预览：
html:
<div>
<input type="checkbox" ng-model="select_allList" ng-change="selectAll()"> 全部选中<br><br>
<table class="table table-hover table-responsive workSheet-form">
<thead>
<tr>
<th>选择th>
<th>大单位th>
<th>小单位th>
tr>
thead>
<tbody ng-repeat="item in customerList">
<tr>
<td>
<label for="flag">全选此单位
<input id="flag" type="checkbox" ng-model="item.select_all" ng-change="selectItem(item)">
label>
展开子表 <input type="checkbox" ng-model="myVar">
td>
<td>{{item.deliverAdress}}td>
<td>{{item.workUunitName}}td>
tr>
<tr ng-show="myVar">
<td colspan="3">
<table>
<thead>
<tr>
<th>选择th>
<th>姓名th>
<th>品名th>
<th>数量th>
tr>
thead>
<tbody>
<tr ng-repeat="x in item.listBoxProduct">
<td>
<input type="checkbox" ng-model="x.checked" ng-change="selectOne(x,item)">
td>
<td>{{x.name}}td>
<td>{{x.infoName}}td>
<td>{{x.quantity}}td>
tr>
tbody>
table>td>
tr>
tbody>
table>
div>js代码：
$scope.m = [];
$scope.checked = [];
$scope.selectAll = function () {
if($scope.select_allList) {
$scope.checked = [];
angular.forEach($scope.customerList, function (item) {
console.log("true:"+item.select_all );
item.select_all = true;
angular.forEach(item.listBoxProduct, function (i) {
i.checked = true;
$scope.checked.push(i);
})
})
}else {
angular.forEach($scope.customerList, function (item) {
item.select_all = false;
$scope.checked = [];
angular.forEach(item.listBoxProduct, function (i) {
i.checked = false;
})
})
}
console.log("$scope.checked"+JSON.stringify($scope.checked));
};
$scope.selectItem = function (item) {
console.log("$scope.select_all"+item.select_all);
if(item.select_all) {
// $scope.checked = [];
angular.forEach(item.listBoxProduct, function (i) {
console.log("true:"+item.select_all );
i.checked = true;
$scope.checked.push(i);
})
}else {
angular.forEach(item.listBoxProduct, function (i) {
console.log("false:"+item.select_all );
i.checked = false;
// $scope.checked = [];
var index = $scope.checked.indexOf(i);
$scope.checked.splice(index, 1);
})
}
console.log("$scope.checked"+JSON.stringify($scope.checked));
};
$scope.selectOne = function (x,item) {
var index = $scope.checked.indexOf(x);
console.log("index"+index);
if(x.checked && index === -1) {
$scope.checked.push(x);
} else if (!x.checked && index !== -1){
$scope.checked.splice(index, 1);
};
//后续添加当子表全选时主表相应记录的checkBox 选中
console.log(JSON.stringify($scope.checked));
};选中的数据：
