2016-10-21 75 views
0

我有三個選項卡。默認情況下,第一個選項卡將被打開,其餘選項卡應被禁用。如何在第一個選項卡在Angularjs中完成時移動到第二個選項卡並啓用第二個選項卡?

當我完成第一個選項卡,然後我只需要啓用只有第二個領域和分別。

如何通過逐個完成選項卡來啓用/禁用選項卡?在一個範圍可變電流步數

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

回答

0

成功保存上一個角色後調用$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 
0

跟蹤說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

0

例如在我看來,要實現一個嚮導?

如果是這樣,爲什麼不使用嚮導組件爲AnuglarJS像this one

相關問題