javascript - AngularJS - 单击时隐藏父 div，然后显示下一个 div

Question

我正在尝试使用 Angular 编写一个页面，其中我有一个分为多个部分的表单，并且一次只显示一个表单部分。当单击该部分底部的按钮时，当前部分被隐藏并显示 HTML 中的下一个表单部分——许多部分依此类推。

到目前为止，这是我的代码:

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

我是 Angular 的新手，所以我对如何实现这一目标一无所知。

Answer 1

因此，为了让您开始(除了我最初放置的 google 链接)，这是一个 super 基本的示例，展示了一种如何使用 angular 显示和隐藏 div 的方法。如果我正在制作一个实际的应用程序，我可能会在这部分使用路由，但为了简单起见我没有这样做。这可以让您朝着正确的方向开始。

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++;
  }
});

拜托，还是看一些多步教程