Question

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

我想在成功填写第一张表格后自动导航到下一个标签（即下一个表格）。

我该怎么做？

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

Answer 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方法中的Current角色检查，如下所示：

    $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

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

1 个答案: