如何在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>

我的计算函数使用子代码，来自saveclick函数的等级来处理它们并在按钮下方显示结果。

另外我不确定如何让用户只选择一个按钮，就像他们选择A1并再次在同一主题中选择A2一样，之前的A1应该被替换。此时所有成绩均从所有科目中选出。

Answer 1

尝试类似

的内容

<div ng-repeat="i in [1,2,3,4,5,6,7,8,9]" ng-click="increment(j)" ng-show="$index+1 == j">
    <div >{{$index}} How much did you score in SUBJECT {{i}}</div>
</div>`

increment是增加索引的范围方法。

Answer 2

我认为你需要这样的东西：

<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" ng-show="selectedGrades[subjects[$parent.$index-1]] || $parent.$index== 0" ng-class="{selected: selectedGrades[subcode] == grade}" >{{grade}}</button>
    </div>
    <br/>
  </div>
  <button ng-click="calculate()">Calculate</button>

您的JS代码：

$scope.saveclick = function (subcode,grade){
    $scope.selectedGrades[subcode] = grade; //replace previous selected grade.
  };

  $scope.selectedGrades = {};

尝试：

• ng-show="selectedGrades[subjects[$parent.$index-1]] || $parent.$index== 0"一次显示1个问题，并在上​​一个问题得到解答后显示。
• ng-class="{selected: selectedGrades[subcode] == grade}"突出显示该主题的当前所选成绩。

DEMO

如果您需要隐藏整个问题而不仅仅是按钮，请将ng-show移至问题并将其更改为ng-show="selectedGrades[subjects[$index-1]] || $index== 0"

DEMO

如果您需要在答案后立即隐藏问题，请尝试：ng-show="(selectedGrades[subjects[$index-1]] || $index== 0) && !selectedGrades[subcode]"

DEMO

Answer 3

您可以使用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