UI-bootstrap - 添加一个选项卡并默认选择它

Question

我正在尝试使用 ui-bootstrap 制作一个标签系统。

几乎没问题，但是当我添加最后一个标签时，我仍然遇到问题。 添加一个选项卡是可以的，但如果我想在创建后自动选择它，我有一个奇怪的行为： 添加了一个标签：很好 添加了一个标签：未选中 添加了一个标签：很好 添加了一个标签：未选中 等等……

我创建了一个 plunkr 来演示我的错误，只需多次单击“+”按钮并查看选择了哪个选项卡。

这是 JS 代码：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {

  $scope.tabs = [{
    title: 'Dynamic Title 1',
    content: 'Dynamic content 1',
    active: false
  }, {
    title: 'Dynamic Title 2',
    content: 'Dynamic content 2',
    active: false
  }];

  $scope.addTab = function() {
    $scope.tabs.push({
      title: 'Dynamic Title ' + ($scope.tabs.length + 1),
      content: 'Dynamic content ' + ($scope.tabs.length + 1)
    });

    $scope.active = $scope.tabs.length - 1;
  };

});

这是 HTML 代码：

  <div ng-controller="TabsDemoCtrl">
    <p>Select a tab by setting active binding to true:</p>
    <p>
      <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
      <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
    </p>
    <p>
      <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
    </p>
    <hr />

    <uib-tabset active="active">
      <uib-tab index="$index" ng-repeat="tab in tabs" heading="{{tab.title}}">
        {{tab.content}}
      </uib-tab>
    </uib-tabset>

    <br /><br />

    <button ng-click="addTab()">plus</button>

  </div>

任何关于这方面的帮助都会很好，

干杯

Answer 1

您必须使用超时，uibootstrap 在技术上不支持动态生成的选项卡。

$timeout(function() {
   $scope.active = $scope.tabs.length - 1;
}, 0);

看到这个线程。 https://github.com/angular-ui/bootstrap/issues/5656