Question

我有三个标签。默认情况下，将打开第一个选项卡，并禁用其余选项卡。

当我完成第一个标签时，我只需要分别启用第二个字段。

如何通过逐个完成标签来启用/禁用标签？

<div class="Allmenus">
              <section class="mytopmenu">
                <ul class="myul">



<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(5)}" ng-if="roleMusicDirector==true"class="myli"><a href ng-click="getMusicDirectorInfo()">MusicDirector</a></li>
<li ng-class="{active:isSelected(4)}" ng-if="roleLyricist==true"class="myli"><a href ng-click="getLyricistInfo()">Lyricist</a></li>                               
</ul>
</section>
                <aside class="myextensionbar">
   <ul class="mynewul">

       <li class="myli"><a href ng-click="showMoreRole()"><span class="glyphicon glyphicon-chevron-right"></span></a></li>   

                </ul>
                </aside>

</div>

Answer 1

跟踪范围变量中的当前步骤编号step_no，并通过应用类禁用大于当前步骤编号的步骤。

<li ng-class="{'disabled': step_no<1}"> Actor </li>
<li ng-class="{'disabled': step_no<2}"> Director </li>
...

您可以通过css应用所需的禁用样式。例如：

li.disabled {
   pointer-events: none;
   background: #f4f4f4;
}

查看Plunker

上的示例

Answer 2

在我看来，你想要实现一个向导？

如果是这样，为什么不使用像this one这样的AnuglarJS的向导组件？

Answer 3

成功保存上一个角色后调用$scope.nextRole()函数。

$scope.nextRole = function() {
               // RoleNames will have an array of all roles

                var index = RoleNames.indexOf($scope.roleName);
            console.log(index);
            //add this after save success
            if(index<RoleNames.length-1){
              $scope.roleName = RoleNames[index+1];
              console.log( $scope.roleName);
                console.log($scope.indexValue);
                $scope.displaySelectedRole($scope.roleName, index+1); // will set the index value as active
            }
            else{
              $scope.roleName = RoleNames[0];//will go back to actor form or add anything you want
            }
            };

<li class="myli" ng-repeat="role in displayrole | limitTo: 10 track by $index" ng-class="{active:isSelected($index)}"><a href ng-click="displaySelectedRole(role, $index)" >{{role}}</a></li> // used ng-repeat to form tab with all roles in RoleNames

如何在Angularjs中完成第一个选项卡时移动到第二个选项卡并启用第二个选项卡？

3 个答案: