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

主题数组例如：[＆＃34; html＆＃34;，＆＃34; css＆＃34;，＆＃34; angular＆＃34;]

我不知道我做错了什么，但当我点击第一项时，面板正在打开＆＃34;崩溃＆＃34;但是当我点击第二个项目时，仍有＆＃34;崩溃＆＃34;类正在上升，导致关闭面板而不是打开面板。

工作示例： 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>

可折叠面板无法正常工作

1 个答案: