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 [0]设置为false 在激活标签[1]之前，这会导致一个空白区域，两个标签都不可见。

非常感谢任何想法

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

  });

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

1 个答案: