Wie navigiere ich zum nächsten Tab, wenn ich das erste Formular (Tab) in Angularjs einreiche?

Question

Ich habe eine Liste von Rollen (im Array) und zeige die Liste als Tabs (die dynamische Anzahl von Rollen enthält).

Ich möchte nach dem erfolgreichen Abschluss des ersten Formulars automatisch zum nächsten Tab (d. H. Nächsten Formular) navigieren.

Wie kann ich das tun?

$scope.array = ["Actor", "Singer", "Lyricist"]; 

Also meine Arraylänge ist 3 und ich werde nur Schauspieler, Sänger und Texter als Registerkarten angezeigt werden soll.

Wie kann ich zum zweiten Tab navigieren, wenn ich das erste Formular (Registerkarte) eingereicht habe und die Erfolgsmeldung erhält.

<div class="panel-body newPanelBody" ng-if="actor && !director && !singer && !lyricist> 
    <h4><b>Please enter your mandatory details</b></h4> 
      <hr width="90%" style="border-color: black; margin-left: 10px;"> 

      <form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate> 
      /* My form here */ 
</form> 
</div> 


<div class="panel-body newPanelBody" ng-if=" director && !actor && !singer && !lyricist> 
    <h4><b>Please enter your mandatory details</b></h4> 
      <hr width="90%" style="border-color: black; margin-left: 10px;"> 

      <form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate> 
      /* My form here */ 
</form> 
</div> 

<div class="panel-body newPanelBody" ng-if=" singer && !actor && !director && !lyricist> 
    <h4><b>Please enter your mandatory details</b></h4> 
      <hr width="90%" style="border-color: black; margin-left: 10px;"> 

      <form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate> 
      /* My form here */ 
</form> 
</div> 

<div class="panel-body newPanelBody" ng-if="lyricist && !actor && !director && !singer > 
    <h4><b>Please enter your mandatory details</b></h4> 
      <hr width="90%" style="border-color: black; margin-left: 10px;"> 

      <form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate> 
      /* My form here */ 
</form> 
</div> 

Answer 1

halten eine Variable, die die aktuelle Rolle gespeichert werden, von dem Sie seine Form und auf dem Erfolg dieses Formular zeigen, können die aktuelle Rolle, von denen auf die nächste Rolle ändern Sie das Formular ausgefüllt werden soll.

 
    <div ng-if=" selectedRole === 'Director'"> 
     <form name="tForm" role="form" data-ng-init="resp()" ng-submit="savePostProfile()" novalidate> 
       /* My form here */ 
     </form> 
    </div> 

einen Scheck für aktuelle Rolle in dem Verfahren savePostProfile verwenden wie unten angegeben:

$scope.roles = ["Actor", "Singer", "Lyricist"]; 
    $scope.selectedRole = $scope.roles[0]; 
    $scope.savePostProfile = function(){ 
     var index = $scope.roles.indexOf($scope.selectedRole); 
     console.log(index); 
     //add this after save success 
     if(index<$scope.roles.length-1){ 
      $scope.selectedRole = $scope.roles[index+1]; 
      console.log($scope.selectedRole); 
     } 
     else{ 
      $scope.selectedRole = $scope.roles[0];///will go back to actor form or add anything you want 
     } 
     }; 

Überprüfung der plunkr für Arbeitslösung zur Verfügung gestellt, habe ich CSS-Klassen des Codes entfernt.

https://plnkr.co/edit/Fe08q8HU77KF9x2sjybb?p=preview