复选框多个全选 angularjs

喜欢ヅ旅行 2021-10-24 00:28 396阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYzOTYwOQ_size_16_color_FFFFFF_t_70]: /images/20211023/d5e0f6c284a64d4989c3bc92b36b6126.png