Javascript 显示隐藏div的角度方式类似于制表符，但没有制表符

我正在尝试使用Div来实现类似选项卡的功能，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>

---

像这样的方法应该会奏效：

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

        <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
    </div>
 </div>

{{问题.问题}
下一个

顺便说一下，如果你想展示一个问题，你不需要重复：

<div class="targetDiv">
   <h3>{{questions[selectedIndex].question}}</h3>

   <a class="showSingle btn btn-primary" ng-click="selectedIndex = selectedIndex + 1">Next</a>
</div>

{{问题[selectedIndex]。问题}
下一个

尽管我还没有在真实环境中对其进行测试，但以下功能应该可以正常工作：

$scope.setActive = function(index) {
  $scope.selectedQuestionIndex = index + 1;
}

$scope.isActive = function(index) {
  return index == $scope.selectedQuestionIndex;
}

您的html是：

<div class="col-md-10">
  <div id="div{{$index}}" class="targetDiv" ng-show="isActive($index)" 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="setActive($index)">Next</a>
  </div>
</div>

{{问题.问题}
{{answers.AnswerText}
下一个

控制器：

.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:

...
下一个

---

<> P>但是你可能会考虑把它变成一个指令。 也许像这样的事情会让你失望

<div class="col-md-10" ng-init="firstQuestion()">
    <div ng-repeat="question in Questions" class="targetDiv" ng-show="$index == currentQuestionIndex">
        <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()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
    </div>
</div>

{{问题.问题}
{{answers.AnswerText}
下一个

用jslike

$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length)
                $scope.currentQuestionIndex += 1;
        }

$scope.firstQuestion=函数（）{
$scope.currentQuestionIndex=0；
};
$scope.doSomething=函数（）{
if（$scope.currentQuestionIndex<$scope.Questions.length）
$scope.currentQuestionIndex+=1；
}

---

或者类似的事情

<div class="col-md-10" ng-init="firstQuestion()">    
    <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()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
</div>

{{问题.问题}
{{answers.AnswerText}
下一个

用js

$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
            $scope.question = $scope.Questions[$scope.currentQuestionIndex];
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length) {
                $scope.currentQuestionIndex += 1;
                $scope.question = $scope.Questions[$scope.currentQuestionIndex];
            }
        }

$scope.firstQuestion=函数（）{
$scope.currentQuestionIndex=0；
$scope.question=$scope.Questions[$scope.currentQuestionIndex]；
};
$scope.doSomething=函数（）{
if（$scope.currentQuestionIndex<$scope.Questions.length）{
$scope.currentQuestionIndex+=1；
$scope.question=$scope.Questions[$scope.currentQuestionIndex]；
}
}

您的setSomething和doSomething（）正确无误。你可以发布这两个函数的javascript，这样我就可以从中创建一个答案了吗？在继续之前，我想看看您已经拥有了什么。这是我的控制器代码：$scope.showonlyone=function（divToShow）{angular.forEach（$scope.Questions，function（que，I）{if（divToShow=='div'+I）{/$scope.Questions.splice（que，1）；返回true；}否则{返回false；}}}）；感谢Blackunknown的快速回复。坦白地说我真的不知道该设置什么和在哪里…你能把控制器代码整齐地格式化在一个带有编辑的代码块中吗？这样，未来的访问者可以一眼就能看到您的代码。当您单击“下一步”用完索引时会发生什么？您的第二个解决方案没有检查您是否仍在范围内。是的，当然，还应该有类似ng disabled=“selectedIndex>questions.length-2”的内容。。。但是这超出了这个问题的范围不完全正确，虽然它没有检查在这种情况下，ng show将阻止next按钮出现。所以你永远不会出界根据您的评论编辑，您对范围的看法是正确的，但警告他也无妨。Lowe在回答中似乎对他的html做了同样危险的更改。非常感谢Petr Averyanov和Blackunknown帮助我。它完全符合我的要求。事实上，我是一个硬核后端开发人员，经常吓唬Javascript太多。但我想我爱上了Angular。我希望能更深入地研究它。。再次感谢。我相信我很快会再次见到你们：）。

<div class="col-md-10" ng-init="firstQuestion()">    
    <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()" ng-show = "currentQuestionIndex < Questions.length - 1">Next</a>
</div>

$scope.firstQuestion = function () {
            $scope.currentQuestionIndex = 0;
            $scope.question = $scope.Questions[$scope.currentQuestionIndex];
        };

        $scope.doSomething = function () {
            if ($scope.currentQuestionIndex < $scope.Questions.length) {
                $scope.currentQuestionIndex += 1;
                $scope.question = $scope.Questions[$scope.currentQuestionIndex];
            }
        }