可折叠面板不能正常工作

Question

我面临的一个问题与面板崩溃工作，我有一个创建动态数据目标和ID的面板，因为我有ng-repeat的项目列表，但问题是可折叠面板不是在触发面板 这里的范围的HTML代码：

<div class="row"> 
    <div class="col-xs-4" ng-repeat="topics in oJdDetails.topics"> 
     <a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)"> 
      <p class="col-xs-3">{{topics}}</p> 
      <span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true"></span> 
     </a> 
    </div> 
</div> 
<div id="{{'collapse'+'_' + index}}" class="panel-collapse collapse"> 
    <div class="panel-body"> 
     <div class="col-sm-6"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <p class="col-xs-6">Question Lists</p> 
        <div class="input-group col-xs-6"> 
         <input type="text" class="form-control" ng-model="search" ng-change="fnSearchQList(search)"> 
         <span class="input-group-addon"><span class="glyphicon glyphicon-search" data-toggle="tooltip" data-placement="bottom" title="Search question " activetooltip aria-hidden="true"></span></span> 
        </div> 
       </div> 
       <div class="panel-body"> 
        <button class="btn btn-primary pull-right" ng-click="fnshowInputQList()"> 
         <div class="row"> 
          <span class="col-xs-8">Add Question List</span><span class="glyphicon glyphicon-plus-sign col-xs-4" aria-hidden="true"></span> 
         </div> 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

控制器代码如下：

$scope.fngetQList = function(topics,index) { 
     $scope.index = index; 
    }; 

主题的阵列是例如：[“HTML”，“CSS” ，“角”]

我不知道我在做什么错，但是当我点击第1项时，面板被“折叠”类打开，但是当我点击第二项时，仍然会出现“折叠”类，关闭面板而不是打开面板。

工作示例： http://jsfiddle.net/Lvc0u55v/6625/

任何帮助，将不胜感激。

Answer 1

我不知道这是否正确，但它做你想做的。我增加了弹出DIV的NG-重复内

<div ng-controller="MyCtrl"> 
    <div class="row"> 
     <div class="col-xs-4" ng-repeat="topics in topics"> 
     <a style="cursor:pointer" data-toggle="collapse" data-target="{{'#'+'collapse'+'_' + $index}}" ng-click="fngetQList(topics,$index)"> 
      <p class="col-xs-3">{{topics}}</p> 
      <span class="glyphicon glyphicon-plus-sign col-xs-1" aria-hidden="true" /> 
      <div id="{{'collapse'+'_' + $index}}" class="panel-collapse collapse"> 
       <div class="panel-body"> 
        <div class="col-sm-6"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <p class="col-xs-6">Question Lists</p> 
         </div> 
         <div class="panel-body"> 
          <button class="btn btn-primary pull-right">Click here</button> 
         </div> 
        </div> 
        </div> 
       </div> 
      </div> 
     </a> 
     </div> 
    </div> 
</div>