AngularJS - クリック時に親divを非表示にして次のdivを表示

Question

Angularを使用して、複数のセクションに分割されたフォームを作成しようとしましたが、一度に1つのフォームセクションしか表示されません。セクションの下部にあるボタンをクリックすると、現在のセクションが非表示になり、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; 
} 

私は角度でかなり新しいので、私はかなり達成するためにどのようにと迷ってしまいましたよこの。

Answer 1

だから、あなたが始めるのは（私はもともと置くGoogleのリンクのほかに）これは、角使って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

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

をAND条件の値を変更するには、JSの機能を持っています。

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