使用bootstrap面板崩溃的问题

时间:2016-07-07 11:44:00

标签: javascript css angularjs twitter-bootstrap

我正面临一个使用面板折叠的问题,我有一个为面板创建动态数据目标和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”]

我不知道我做错了什么,但是当我点击第1项时,面板正在打开“崩溃”类,但是当我点击第二项时,仍然会出现“崩溃”类的结果在关闭面板而不是打开面板。

小提琴:https://jsfiddle.net/furkankatman/trgrjwf1/7/

任何帮助都将不胜感激。

0 个答案:

没有答案