使用動態ID時Bootstrap崩潰不起作用

Question

為引導崩潰創建動態ID時出現問題。 首先，當我單擊ng-repeat中的任何主題時，它應該折疊並提供問題列表。

這里的問題是，當我單擊第一個主題時它會折疊，但是當我單擊第二個主題時，第一個主題折疊會得到第二個主題問題列表數據

HTML：

<div class="topic-div">
                    <p class="topic-heading">Topics</p>
                </div>
                <div class="arrow-down"></div>
                <ul>
                    <li ng-repeat="topics in oJdDetails.topics" class="topic-li"  ng-click="fngetQList(topics,$index)">
                        <p class="topics-p"> {{topics}}</p>
                        <ul uib-collapse="isCollapsed">
                            <li ng-repeat="value in aQuestionList">{{value.quesList.quesListName}}</li>
                        </ul>
                    </li>
                </ul>

Js：

$scope.fngetQList = function(topics, index) {
            debugger;
            $scope.isCollapsed = true;
            $scope.displayQList = true;
            $scope.sTopics = topics;
            $scope.index = index;
            getCandidateInterviewListService.fnGetQList(topics).then(function(response) {
                $scope.aQuestionList = response;
                console.log($scope.aQuestionList);
            });
        };

我不知道如何使它工作。 任何幫助將不勝感激。

Answer 1

看來您使用的是普通的bootstrap庫，該庫無法與angularjs一起使用。 嘗試使用https://angular-ui.github.io/bootstrap/#/collapse

Answer 2

嘗試避免將jQuery與Angular一起使用，尤其是對於Bootstrap。 Angular的UI團隊已經為Bootstrap編寫了Angular包裝器。

http://angular-ui.github.io/bootstrap/

請改用該庫。 您不需要jQuery。 http://angular-ui.github.io/bootstrap/#/collapse

這使用了Bootstrap的CSS文件，而Angular提供了Javascript部分，因此您不需要使用jQuery。

Angular本身是一個足夠大的Javascript庫，因此也不要通過安裝jQuery來誇大您的應用程序。