如何在Angularjs中提交第一個表單（選項卡）時導航到下一個選項卡？

我有一個角色列表（在數組中）並將列表顯示爲製表符（其中包含動態編號的角色）。如何在Angularjs中提交第一個表單（選項卡）時導航到下一個選項卡？

我想在成功完成第一個表單後自動導航到下一個選項卡（即下一個表單）。

我該怎麼做？

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

所以我的數組長度是3，我只會顯示Actor，Singer和Lyricist作爲選項卡。

<li ng-class="{active:isSelected(1)}" ng-if="roleActor==true"class="myli"><a href ng-click="getActorInfo()">Actor</a></li> 
<li ng-class="{active:isSelected(2)}" ng-if="roleDirector==true"class="myli"><a href ng-click="getDirectorInfo()">Director</a></li> 
<li ng-class="{active:isSelected(3)}" ng-if="roleSinger==true"class="myli"><a href ng-click="getSingerInfo()">Singer</a></li> 
<li ng-class="{active:isSelected(4)}" ng-if="roleLyricist==true"class="myli"><a href ng-click="getLyricistInfo()">Lyricist</a></li>

我如何可以導航到第二個標籤，當我第一次提交表單（標籤），並獲得成功的消息。

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

來源

2016-10-24 kalai

你的數組只有3個角色，而你的html支持4個角色。你是否只想顯示你的'$ scope.array'中指定的選項卡？ – Lihini

是的。我嘗試這樣做，但對我來說，一個標籤頁會導航，頁面不會保留爲第一個數組。 http://jsfiddle.net/kbjwymbq/11/ – kalai

保持將存儲，從中可以顯示出它的形式目前的作用和在該表單的提交成功改變當前角色，其形式是要填充的下一個角色的變量。

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

使用支票當前在savePostProfile方法的作用就像下面給出：

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

檢查規定的工作液的plunkr，我已刪除了你的代碼的CSS類。

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

來源

2016-10-24 07:16:42 Hersharan

如何在Angularjs中提交第一個表單（選項卡）時導航到下一個選項卡？

回答

相關問題