Question

为bootstrap崩溃创建动态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

尽量避免在Angular中使用jQuery，特别是对于Bootstrap。 Angular的UI团队为Bootstrap编写了Angular包装器。

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

请改用此库。你不需要jQuery。 http://angular-ui.github.io/bootstrap/#/collapse

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

Angular本身就是一个足够大的Javascript库，所以不要通过安装jQuery来扩展你的应用程序。

使用动态ID

2 个答案: