I have build a list of accordions, each accordion represent a group of items. I have used ng-repeat to iterate through group names,each group has a checkbox which indicate if it is chosen or not.
The example works fine for single group of accordion, but the moment I am putting the accordion inside ng-repeat, the checkbox can't be selected at all.
Here is the code, the main checkbox of each group title doesn't work apparently, I am try to figure out the reason for this.
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="http://ift.tt/1oMJErh"></script>
<script src="http://ift.tt/1jAc4pg"></script>
<script src="http://ift.tt/1mQ03rn">
</script>
<link href="http://ift.tt/1jAc5cP" rel="stylesheet"/>
<div ng-app="app" ng-controller="mainCTRL">
<div ng-repeat="item in items1">
<div class="panel-group driving-license-settings" id="accordion-">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion-" data-target="#collapseOne-">
<input type="checkbox" class="ui-checkbox" id="chk1" value="">
<label for="chk1"></label>
</a>
</h4>
</div>
<div id="collapseOne-" class="panel-collapse collapse ">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk2" value="">
<label for="chk2">A</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk3" value="">
<label for="chk3">B</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk4" value="">
<label for="chk4">C</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk5" value="">
<label for="chk5">D</label>
</div>
<div class="checkbox">
<input type="checkbox" class="ui-checkbox" id="chk6" value="">
<label for="chk6">E</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire