kalai kalai - 1 month ago 7
AngularJS Question

How to move to second tab and enable the second tab when first tab is completed in Angularjs?

I am having three tabs. By default first tab will be opened and remaining tabs should be disabled.

When I completed first tab then I need to enable only second field and respectively.

How to enable/disable the tab by completing tab one-by-one?

<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

Calling $scope.nextRole() function after saving previous role successfully.

$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