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

所以为了让你开始（除了我最初提供的谷歌链接），这是一个超级基本的例子，显示了如何使用角度显示和隐藏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++;
  }
});

请继续查看一些多步骤教程

Answer 2

您需要使用角度ngClick调用锚标记上的函数。只需更改$ scope变量值为true或false。

<div ng-controller="MainCtrl">
<form>
    <div class="form-section" ng-if="firstForm">
        <!-- input fields -->

        <a class="next" ng-click="showForm('First')">NEXT</a>

    </div>

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

        <a class="next" ng-click="showForm('Second')">NEXT</a>

    </div>

    <!-- more "form-section" divs -->
</form>
</div>
app.controller('MainCtrl', function($scope) {

 $scope.firstForm = true;   
 $scope.secondForm = false; 


$scope.showForm = function(param) {

switch(param){  
  case 'First':  
    $scope.firstForm = true;  
    $scope.secondForm = false;
    break;

case 'Second':  
$scope.firstForm = fale;  
$scope.secondForm = true;  
break;

default:   
  $scope.firstForm = true;  
  $scope.secondForm = false;  
  break;  

} 

}
});

Answer 3

取决于隐藏的含义，您可以使用ng-if或ng-show/ng-hide在屏幕上有选择地显示内容。

ng-if不会呈现DOM，而ng-show/ng-hide会使用CSS将其display设置为none。

您可以拥有以下内容：

<form>
<div class="form-section" ng-if="condition == 'div1'">
    <!-- input fields -->

    <!--Some way to change value of condition-->
    <a class="next" ng-click="showDiv('div2')">NEXT</a>

</div>

<div class="form-section" ng-if="condition == 'div2'">
    <!-- input fields -->

    <a class="next" ng-click="showDiv('div3')">NEXT</a>

</div>

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

并有一个JS函数来改变条件的值。

$scope.showDiv = function(divName) {
  $scope.condition= divName;
}

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

3 个答案: