user3183717 user3183717 - 1 month ago 3
AngularJS Question

AngularJS - Hide parent div on click, then display next div

I'm trying to use Angular to write a page where I have a form divided into multiple sections, and only one form section is displayed at a time. When clicking the button at the bottom of the section, the current section is hidden and the next form section in the HTML is displayed -- so on and so forth for many sections.

Here's my code so far:

HTML:

<form>
<div class="form-section">
<!-- input fields -->

<a class="next">NEXT</a>

</div>

<div class="form-section">
<!-- input fields -->

<a class="next">NEXT</a>

</div>

<!-- more "form-section" divs -->
</form>


CSS:

/* hide all form sections */
.form-section {
display:none;
}


/* display first form section */
.form-section:first-child {
display:initial;
}

.next {
cursor:pointer;
}


I'm pretty new at Angular so I'm pretty lost as to how to achieve this.

Answer

So to get you started (besides the google link I originally put) this is a super basic example showing one way on how to show and hide divs using angular. If I was making an actual app, I would probably use routes for this part, but for sake of simplicity I didn't. This could get you started in the right direction.

https://jsfiddle.net/t76e8gt9/

HTML

<div ng-app="MultiStep" ng-controller="FormController">
  <h1>
  Step {{currentStep}}
  </h1>
  <div ng-if="currentStep == 1">
    <label>Name</label>
    <input type="text" placeholder="Name"/>
  </div>
  <div ng-if="currentStep == 2">
    <label>Email</label>
    <input type="email" placeholder="Email"/>
  </div>  
 <div ng-if="currentStep == 3">
    <label>Gender</label><br>
    <labe>Male</labe><input type="radio" value="male" name="gender" /><br>
    <label>Female</label><input type="radio" value="female" name="gender" />
  </div>  
  <button ng-click="nextStep()">Next</button>
</div>

JS

var app = angular.module('MultiStep', []);

app.controller('FormController', function($scope) {
  $scope.currentStep = 1;

  $scope.nextStep = function() {
    $scope.currentStep++;
  }
});

Please, still look at some of the multistep tutorial

Comments