Question

这是我的角度表，当我单击一行中的复选框时，这里显示行数据。我的查询是如何在单击复选框时取消选中兄弟复选框？我试图实现这一点，但我无法做到。

＆＃13;

var app= angular.module('myApp',[])
app.controller('myController',function($scope){

	$scope.init = function(){
		$scope.List=[
			{
				'encounterDate':'jan 11',
				'visitId':'102359',    				
				'emailId':'santhosh@gmail.com'
			},
			{
				'encounterDate':'dec 2',
				'visitId':'102360',    				
				'emailId':'vijay@gmail.com'
			}
		];
		
	}

	$scope.showData = function(data){
		alert("Encounter Date :" + data.encounterDate  +" \n Visit ID:" + data.visitId +
			"\n Patient name:"+ data.patientName +"\n Age:"+ data.age +"\n Referred by:"+ data.referredBy +"\n Email: "+ data.emailId)

	}
})

＆＃13;

<!DOCTYPE html>
<html>
<head>
	
	<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>    	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
	
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="init()">
<div class="container">
	
	<table class="table table-striped table-bordered table-hover">
		<thead>
			<tr>
				<th>S.no</th>
				<th>Action</th>
				<th>Encounter Date</th>
				<th>Visit ID</th>    				
				<th>Email ID</th>				
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat='data in List'>
				<td>{{$index+1}}</td>
				<td><input type='checkbox'  class="checkBox"></td>
				<td>{{data.encounterDate}}</td>
				<td>{{data.visitId}}</td>    				
				<td>{{data.emailId}}</td>
			</tr>
		</tbody>	
	</table>
</div>
</body>
</html>

＆＃13;

我试过这不起作用..

$('input[type="checkbox"]').on('change', function() {

              // uncheck sibling checkboxes (checkboxes on the same row)
              $(this).siblings().prop('checked', false);

              // uncheck checkboxes in the same column
              $('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);

            });

任何建议？可以任何人让我知道，我做错了什么？

Answer 1

First add ng-model to your checkboxes

<td><input type='checkbox' ng-model="data.checked" ng-change="checkSibling(data)"  class="checkBox"></td>

and use ng-change to uncheck siblings when a checkbox is checked

$scope.checkSibling = function(rowData){
    angular.forEach($scope.List, function(value, key) {
        if(value.visitId != rowData.visitId)
            value.checked = false;
    });
}

Demo

如何取消选中兄弟复选框

1 个答案: