在Angularjs中提交第一个表单（选项卡）时如何导航到下一个选项卡？答案

【问题标题】：How to navigate to next tab when submitting first form (tab) in Angularjs?在Angularjs中提交第一个表单（选项卡）时如何导航到下一个选项卡？
【发布时间】：2016-10-24 01:25:52
【问题描述】：

我有一个角色列表（在数组中）并将列表显示为选项卡（其中包含角色的动态编号）。

我想在成功完成第一个表单后自动导航到下一个选项卡（即下一个表单）。

我该怎么做？

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

所以我的数组长度是 3，我只会将演员、歌手和作词人显示为选项卡。

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

【问题讨论】：

您的数组只有 3 个角色，而您的 html 支持 4 个角色。您是否尝试仅显示您的 $scope.array 中指定的选项卡？
是的。我试过这样，但对我来说，一个标签被导航并且页面不会保留为第一个数组。 jsfiddle.net/kbjwymbq/11

标签： angularjs tabs

【解决方案1】：

保留一个变量，该变量将存储当前角色，您可以从中显示其表单，并在该表单提交成功后将当前角色更改为要填写表单的下一个角色。

<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

【讨论】：