angularjs - 无法在 ui-bootstrap 选项卡之间切换

Question

我正在使用 $scope.tabs 来控制浏览器窗口中的两个选项卡

$scope.tabs = [
  {heading: 'Setup', active: true, disabled: false},
  {heading: 'Editor', active: false, disabled: true},
]

当用户单击一个按钮时，我正在调用一个继续功能，该功能应该启用第二个选项卡并切换到它

$scope.continue = function () {
  $scope.tabs[1].disabled = false;
  $scope.tabs[1].active = true;
}

但是，当我单击按钮时，选项卡已启用，但未显示在浏览器中。如果我再次单击，则该选项卡将变为可见。在激活 tabs[1] 之前，我尝试将 tabs[0] active 设置为 false，但这会导致两个选项卡都不可见的空白区域。

任何想法都非常感谢

C

Answer 1

开始了：

演示Plunker

HTML

<div ng-controller="MyCtrl">

 <a href="" ng-click="continue()">click me</a>

<tabset >
        <tab ng-repeat="tabItem in tabs" 
        heading="{{tabItem.heading}}"
        active="tabItem.active"
        disabled="tabItem.disabled"
        >
            {{tabItem.content}}
        </tab>

    </tabset>
</div>

JS

var myApp = angular.module('myApp', ['ui.bootstrap']);

   myApp.controller('MyCtrl', function($scope) {
   $scope.tabs = [
        {heading: 'Setup', active: true, disabled: false, content: "This is Setup"},
        {heading: 'Editor', active: false, disabled: true, content: "This is Editor"}        
    ];

    $scope.continue = function () {
      // just to switch flags
      $scope.tabs[0].disabled = !$scope.tabs[0].disabled; 
      $scope.tabs[0].active = !$scope.tabs[0].active;

      $scope.tabs[1].disabled = !$scope.tabs[1].disabled;  
      $scope.tabs[1].active = !$scope.tabs[1].active;
    };

  });