我正在尝试使用 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 的新手,所以我对如何实现这一目标一无所知。
最佳答案
因此,为了让您开始(除了我最初放置的 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++;
}
});
拜托,还是看一些多步教程
关于javascript - AngularJS - 单击时隐藏父 div,然后显示下一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40165724/