UI-bootstrap - 添加一个选项卡，默认情况下 select

Question

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

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

我做了一个plunkr来演示我的错误，只需多次点击“+”按钮，看看哪个选项卡是selected.

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

UI-bootstrap - 添加一个选项卡，默认情况下 select

UI-bootstrap - Add a tab and select it by default

tabs

angularjs

angular-ui-bootstrap