【发布时间】：2016-12-25 15:04:25
【问题描述】：
我已经建立了一个手风琴列表，每个手风琴代表一组项目。 我已经使用 ng-repeat 来遍历组名，每个组都有一个复选框，指示它是否被选中。
该示例适用于单组手风琴，但当我将手风琴放入 ng-repeat 时，根本无法选中复选框。
这是代码，每个组标题的主复选框显然不起作用，我正在尝试找出原因。
我的主要问题是：
1.如何使 Group1 和 Group2 和 Group3 的复选框处于活动状态，以便我可以正确选择它们，在当前情况下，我根本无法选择复选框（Group1，Group2 和 Group3）。
var app = angular.module('app',[]);
app.controller('mainCTRL',function($scope){
$('.collapse').collapse();
$scope.title="Hello World";
$scope.items1 = ['Group1','Group2','Group3']
}).ui-checkbox {
display: none;
}
.ui-checkbox + label {
position: relative;
padding-left: 25px;
display: inline-block;
font-size: 14px;
}
.ui-checkbox + label:before {
background-color: #fff;
/**#fff*/
border: 1px solid #1279C6;
padding: 9px;
border-radius: 3px;
display: block;
position: absolute;
top: 0;
left: 0;
content: "";
}
.ui-checkbox:checked + label:before {
border: 1px solid #1279C6;
color: #99a1a7;
}
.ui-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 1px;
left: 4px;
color: #1279C6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
<div class="panel-group driving-license-settings" id="accordion-{{$index}}">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-{{$index}}"
data-target="#collapseOne-{{$index}}">
<input type="checkbox" class="ui-checkbox" id="chk1-{{$index}}" value="">
<label for="chk1-{{$index}}">{{item}}</label>
</a>
</h4>
</div>
<div id="collapseOne-{{$index}}" class="panel-collapse collapse ">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-1" value="">
<label for="chk2-cb-{{item}}-1">A</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-2" value="">
<label for="chk2-cb-{{item}}-2">B</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-3" value="">
<label for="chk2-cb-{{item}}-3">C</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-4" value="">
<label for="chk2-cb-{{item}}-4">D</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2-cb-{{item}}-5" value="">
<label for="chk2-cb-{{item}}-5">E</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
您的手风琴使用angular ui bootstrap 吗？有了它，您可以执行以下操作：
ng-click="$event.stopPropagation(); toggleOpen();"在您的输入类型复选框上。 -
我不使用 bootstrap ui，你也可以在这个例子中看到我不使用 bootstrap UI 库。
标签： javascript jquery css angularjs checkbox