How can I show forms one after another in angularjs?

Question

I am trying to ask one question at a time like "How much did you score in X", when a user selects any of the given buttons, next question will be displayed, this will continue to a certain limit say 10.

Currently I'm displaying all those questions through a loop 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>

my calculate function uses the subcode,grade from saveclick function to process them and display the result just beneath the button.

Also I'm not sure how do I allow user to select just one button, like if they select A1 and again selects A2 in the same subject, previous A1 should be replaced. At this time all grades are selected from all subjects.

Answer 1

try something like

<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 is the scope method which increments the index.

Answer 2

I think you need something like this:

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

Your JS code:

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

  $scope.selectedGrades = {};

Try:

• ng-show="selectedGrades[subjects[$parent.$index-1]] || $parent.$index== 0" to show 1 question at a time and show next when the previous question has been answered.
• ng-class="{selected: selectedGrades[subcode] == grade}" to highlight the current selected grade for the subject.

DEMO

If you need to hide the entire question instead of just buttons, move the ng-show to the question and change it to ng-show="selectedGrades[subjects[$index-1]] || $index== 0"

DEMO

If you need to hide the question as soon as it's answer, try: ng-show="(selectedGrades[subjects[$index-1]] || $index== 0) && !selectedGrades[subcode]"

DEMO

Answer 3

You can use ng-show to show current step by using $index and create a variable like currentStep

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

which shows only the current question in the list while hiding others

You should update currentStep everytime you save a click to jump up to next question...

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

here is my PLUNKER