Question

我试图使用ui-bootstrap制作标签系统。

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

我已经 plunkr 来演示我的错误，只需点击多次＆＃34; +＆＃34;按钮，看看选择了哪个标签。

这是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 - 添加选项卡并默认选择它

1 个答案: