javascript - 我怎样才能在angularjs中一个接一个地显示表格？

Question

我试图一次问一个问题，比如“你在 X 中得分多少”，当用户选择任何给定按钮时，将显示下一个问题，这将持续到一定的限制，比如 10。

目前我正在通过循环 ng-repeat 显示所有这些问题。

<div ng-repeat="subcode in subjects">
<label class="control-label" for="radios">How much did you score in SUBJECT {{subcode}}?</label>
<div class="btn-group btn-group-m">
<button ng-repeat="grade in gradebuttons" ng-click="saveclick(subcode,grade)" type="button" class="btn btn-default">{{grade}}</button>
</div>
<br/>
</div>
<button ng-click="calculate()">Calculate</button>

我的计算函数使用 subcode,grade from saveclick 函数来处理它们并在按钮下方显示结果。

我也不确定如何让用户只选择一个按钮，比如如果他们选择 A1 并在同一主题中再次选择 A2，则应该替换之前的 A1。此时从所有科目中选择所有成绩。

Answer 1

您可以使用 ng-show 通过使用 $index 显示当前步骤并创建一个变量，如 currentStep

<div ng-repeat="subcode in subjects" ng-show="currentStep == $index">

仅显示列表中的当前问题而隐藏其他问题

每次保存点击以跳转到下一个问题时，您都应该更新 currentStep...

$scope.saveclick = function (subcode,grade) {
    $scope.answers.push({'subcode' : subcode, 'grade' : grade});
    $scope.currentStep++;
}

这是我的 PLUNKER