复选框多个全选 angularjs

@呵呵
于 2019-08-18 15:41:09 发布
阅读量206
点赞数
文章标签：复选框多个全选
本文链接：https://blog.csdn.net/weixin_41639609/article/details/99705289
版权
在这里插入图片描述
<!DOCTYPE html>
<html>

<head>
	<title>demo</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<div ng-app="myApp" ng-controller="myCtrl">
	<div ng-repeat="d in data" style="width: 50%;margin: auto" ng-init="dIndex=$index">

		<div ng-repeat="item in d.resultInfos" ng-init="itemIndex=$index">
			<div class="title">{{item.itemName}}</div>
			<table class="table">
				<thead>
					<tr>
						<th><label><input type="checkbox" ng-model="item.checked"
									ng-click="selectAll(dIndex,itemIndex)" />全选</label></th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="x in item.details">
						<td><label><input type="checkbox" ng-model="x.checked"
									ng-click="chenageInfo(dIndex,itemIndex,$index)" />{{x.itemName}}{{x.result}}</label>
						</td>
					</tr>
				</tbody>

			</table>
		</div>
	</div>

	<div style="width: 50%;margin: auto">
		<button class="btn primary" ng-click="save()">保存</button>
	</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function ($scope) {
		$scope.data = [{
			"reportDate": "2019年06月11日",
			"resultInfos": [{
				"date": "2019-06-11",
				"itemName": "透析门诊半年包",
				"details": [{
					"checked": false,
					"itemName": "乙肝病毒e抗体",
					"result": "0.079PEI U/mL"
				}, {
					"checked": false,
					"itemName": "丙肝病毒抗体",
					"result": "阴性"
				}, {
					"checked": false,
					"itemName": "梅毒螺旋体抗体",
					"result": "阴性"
				}, {
					"checked": false,
					"itemName": "乙肝病毒表面抗原",
					"result": "0.011ng/mL"
				}, {
					"checked": false,
					"itemName": "乙肝病毒表面抗体",
					"result": "0.000mIU/mL"
				}, {
					"checked": false,
					"itemName": "乙肝病毒e抗原",
					"result": "0.099PEI U/mL"
				}, {
					"checked": false,
					"itemName": "乙肝病毒核心抗体",
					"result": "0.234IU/mL"
				}, {
					"checked": false,
					"itemName": "人类免疫缺陷病毒抗体",
					"result": "阴性"
				}],
				"resultInfo": "透析门诊半年包(2019年06月11日): 乙肝病毒e抗体:0.079 PEI U/mL;丙肝病毒抗体:阴性 ;梅毒螺旋体抗体:阴性 ;乙肝病毒表面抗原:0.011 ng/mL;乙肝病毒表面抗体:0.000 mIU/mL;乙肝病毒e抗原:0.099 PEI U/mL;乙肝病毒核心抗体:0.234 IU/mL;人类免疫缺陷病毒抗体:阴性 。",
				"checked": false
			}],
		}, {
			"reportDate": "2019年05月31日",
			"resultInfos": [{
				"date": "2019-05-31",
				"itemName": "凝血全套",
				"details": [{
					"checked": false,
					"itemName": "纤维蛋白原",
					"result": "3.890g/L"
				}, {
					"checked": false,
					"itemName": "D-二聚体",
					"result": "0.97μg/ml"
				}, {
					"checked": false,
					"itemName": "国际标准化比值",
					"result": "0.96"
				}, {
					"checked": false,
					"itemName": "凝血酶原时间",
					"result": "11.2秒"
				}, {
					"checked": false,
					"itemName": "百分活动度％",
					"result": "87.8%"
				}, {
					"checked": false,
					"itemName": "凝血酶时间",
					"result": "19.4秒"
				}, {
					"checked": false,
					"itemName": "抗凝血酶III",
					"result": "110.9%"
				}, {
					"checked": false,
					"itemName": "部分凝血活酶时间",
					"result": "24.3秒"
				}],
				"resultInfo": "凝血全套(2019年05月31日): 纤维蛋白原:3.890 g/L;D-二聚体:0.97 μg/ml;国际标准化比值:0.96 ;凝血酶原时间:11.2 秒;百分活动度％:87.8 %;凝血酶时间:19.4 秒;抗凝血酶III:110.9 %;部分凝血活酶时间:24.3 秒。",
				"checked": false
			}]
		}]
		console.log($scope.data, "999");
		$scope.copyData = [];
		var resultInfo = "";

		$scope.selectAll = function (dIndex, itemIndex) {
			// $scope.data
			if ($scope.data[dIndex].checked) {
				$scope.data[dIndex].checked = false;
				for (var i = 0; i < $scope.data[dIndex].resultInfos[itemIndex].details.length; i++) {
					$scope.data[dIndex].resultInfos[itemIndex].details[i].checked = false;
				}

			} else {
				$scope.data[dIndex].checked = true;
				for (var i = 0; i < $scope.data[dIndex].resultInfos[itemIndex].details.length; i++) {
					$scope.data[dIndex].resultInfos[itemIndex].details[i].checked = true;
				}
			}

		}

		$scope.chenageInfo = function (dIndex, itemIndex, index) {
			var flag = $scope.data[dIndex].resultInfos[itemIndex].details[index].checked;
			var num = 0;

			for (var i = 0; i < $scope.data[dIndex].resultInfos[itemIndex].details.length; i++) {
				if ($scope.data[dIndex].resultInfos[itemIndex].details[i].checked) {
					num++;
				}
			}
			if ($scope.data[dIndex].resultInfos[itemIndex].details.length === num) {
				$scope.data[dIndex].resultInfos[itemIndex].checked = true;
			} else {
				$scope.data[dIndex].resultInfos[itemIndex].checked = false;
			}
		}
		//保存
		$scope.save = function () {
			for (var j = 0; j < $scope.data.length; j++) {

				for (var k = 0; k < $scope.data[j].resultInfos.length; k++) {

					for (var i = 0; i < $scope.data[j].resultInfos[k].details.length; i++) {

						if ($scope.data[j].resultInfos[k].details[i].checked) {
							resultInfo += $scope.data[j].resultInfos[k].details[i].itemName + ':' + $scope.data[j].resultInfos[k].details[i].result
						}
					}
					$scope.copyData.push({
						date: $scope.data[j].resultInfos[k].date,
						result: resultInfo,
						itemName: $scope.data[j].resultInfos[k].itemName
					})
				}
			}
		}

	});
</script>
</body>

</html>