Angularjs에서 첫 번째 탭을 완료 할 때 두 번째 탭으로 이동하고 두 번째 탭을 활성화하는 방법은 무엇입니까?

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

이전 역할을 성공적으로 저장 한 후 $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 

Answer 2

보관할 트랙 step_no을 말하고 클래스를 적용하여 본 스텝 수보다 많은 단계를 사용하지 않도록.

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

css를 통해 원하는 비활성화 스타일을 적용 할 수 있습니다. 예 : Plunker

Answer 3

에

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

예를 들어보기 당신이 마법사를 구현하려는 나에게 보인다?

그렇다면 AnuglarJS의 마법사 구성 요소를 this one과 같이 사용하는 것이 어떻습니까?