可摺疊面板不能正常工作

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>