Программно нажмите, чтобы изменить текущую вкладку в UI-Bootstrap

Question

Я хочу активировать вкладки программно, но не смог найти способ.

Вот plunker для этого. HTML:

<tabset> 
<tab id="a1" heading="Static 1">Static 111</tab> 
<tab id="a2" heading="Static 2" ng-attr-active="{{nd}}">Static 222</tab> 
</tabset> 

JS:

$scope.nd = true; 

пс: "Вкладки и их содержание не должно быть определено в файле JS".

Answer 1

 $scope.st = true; 
     $scope.nd = false; 

     $scope.goToSecond= function() { 
      $scope.st = false; 
      $scope.nd = true; 
     }; 
     $scope.goToFirst= function() { 
      $scope.nd = false; 
      $scope.st = true; 
     }; 

где

<tabset> 
<tab heading="Static title" ng-attr-active="st">"; </tab> 
<tab heading="Static 2" ng-attr-active="nd">"; </tab> 
</tabset> 

Answer 2

Я просто пытался что-то на подобных линиях. Фактически я почти ошибочно сделал вывод, что статические вкладки не могут быть изменены программно. Но они могут быть.

<tabset> 
     <tab heading="Tab 1" ng-attr-active="tabs[0].active"> 
       Tab 1 content 
     </tab> 
     <tab heading="Tab 2" ng-attr-active="tabs[1].active"> 
       Tab 2 content 
     </tab> 
     <tab heading="Tab 3" ng-attr-active="tabs[2].active"> 
       Tab 3 content 
     </tab> 
</tabset> 
<button ng-click="make_tab3_active()">Make Tab 3 Active </button> 

В Javascript вам нужно

$scope.tabs = [{active: true}, {active: false}, {active: false}]; 
$scope.make_tab3_active = function() { 
    $scope.tabs[2].active = true; 
} 

Так просто указать - одиночные переменные не будут делать. Они должны быть в массиве - как указано выше. Хотя документы дают пример аналогичных строк, это неясно, потому что 2 статических вкладки не активны на них, и это может вас смутить.

я провел значительное количество времени, прежде чем найти ответ на эту тему: https://github.com/angular-ui/bootstrap/issues/611