可折叠面板无法正常工作

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","angular"]

我不知道我做错了什么，但是当我单击第一项时，面板会以“collapse in”类打开，但是当我单击第二项时，仍然会附加“collapse in”类，这会导致关闭面板而不是打开面板。

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

任何帮助将不胜感激。

Answer 1

我不知道这是否正确，但它可以满足您的需求。我在 ng-repeat 中添加了弹出 div

<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>