angularjs - 使用 Angular UI Bootstrap 在动态创建的选项卡上设置事件选项卡

Question

我有一个动态选项卡集，它从一个以空白开始的数组生成选项卡。当我向数组添加新项目时，它会显示为新选项卡。我希望最后添加的选项卡成为事件选项卡。每次向数组添加项目时，我都会设置事件索引

HTML:

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

JavaScript:

$scope.activeTabIndex = 0
$scope.tabs = [];

$scope.addTab = function() {
    var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
    $scope.tabs.push(newTab); 
    $scope.activeTabIndex = ($scope.tabs.length - 1);
    console.log($scope.activeTabIndex);
};

这里是演示的完整源代码的 Plunk:https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

问题是它似乎只适用于奇数个选项卡。这就是我的意思:

初始加载时，它看起来像这样:

添加新选项卡后，它会正确显示事件选项卡:

当我添加另一个时，没有任何内容被选中，并且 activeTabIndex 变量变得未定义:

到了第三个，它又开始工作了:

因此，即使对于事件索引号 (0, 2)，它也能正常工作。但不知何故，它不是 Acitve Index: 1，而是显示空白，并且不设置事件选项卡。我将变量写入控制台，它正确显示所有值。

欢迎任何帮助/指示/想法。

谢谢。

Answer 1

根据docs :

事件(默认:第一个选项卡的索引)- 选项卡的事件索引。将其设置为现有选项卡索引将使该选项卡处于事件状态。

确保选项卡数组包含事件选项卡，我认为您应该在其中添加 $timeout:

      $scope.addTab = function() {
        var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
        $scope.tabs.push(newTab); 
        $timeout(function(){
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };

https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview