javascript - 显示隐藏 Div 的 Angular 方式类似于选项卡但没有选项卡

Question

我正在尝试使用 Div 来实现类似于选项卡的功能，其 Div Id 是使用 ng-repeat 生成的。

    <div class="col-md-10">
   <div id="div{{$index}}" class="targetDiv" ng-show="setSomething" ng-repeat="question in Questions">
       <h3>{{question.question}}</h3>

        <button style="width: 100%; margin-bottom: 4px; padding-bottom: 2px;" class="btn btn-primary" ng-repeat="answers in question.Answers">
                  {{answers.AnswerText}}
        </button>

        <a class="showSingle btn btn-primary" ng-click="doSomething()">Next</a>
    </div>
 </div>

我尝试了很多方法，甚至尝试过谷歌搜索类似的东西，但我无法实现它，可能是因为对 AngularJs 的了解有限。我正在尝试实现如下图所示的效果。请记住，每张图片代表一个 DIV，当您单击“下一个”时，当前 DIV 会隐藏，而带有第二个问题的 DIV 则会显示。 。

Controller 代码:

  $scope.showonlyone = function (divToShow) {
        angular.forEach($scope.Questions, function (que, i) {
            if (divToShow == 'div' + i) {
                //$scope.Questions.splice(que, 1);
                return true;
            } else {
                return false;
            }
        })
    };

Answer 1

Controller :

.controller('QuestionListController', function ($scope) {
    $scope.activeIndex = 0;

    $scope.next = function () {
        if ($scope.activeIndex === ($scope.Questions.length - 1)) {
            alert("finished");
        } else {
            $scope.activeIndex = $scope.activeIndex + 1;
        }
    }
});

HTML:

<div ng-controller="QuestionListController">
    <div ng-repeat="question in Questions" ng-if="$index == activeIndex">
        ...
    </div>
    <button ng-click="next()">Next</button>
</div>

但是您可能想考虑将其放入指令中。