jeudi 18 août 2016

checkbox get disabled in ng-repeat of accordions

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