Question

我有一个代码，其中包含按下按钮的按钮，按下时它会向制表符数组中添加一个新选项卡。

<div class="btn btn-primary" ng-click="add()">Add</div>

$scope.add = function()
  {
     $scope.tabs.push({heading: 'new', content: 'ddddddd'});

     $timeout(function ()
    {
        $scope.active = $scope.tabs.length;
    });
  }

然后，填充数组并显示在视图中：

 <uib-tabset active="active">
    <uib-tab ng-repeat="tab in tabs" index="$index + 1">
      <uib-tab-heading>{{ tab.heading }} - <a ng-click="remove($index)">remove</a></uib-tab-heading>
        {{tab.content}}
      </uib-tab>
  </uib-tabset>

此外，每个标签都有一个调用此功能的删除链接：

  $scope.remove = function(index)
  {
    $scope.tabs.splice(index, 1);
    $scope.active = $scope.tabs.length;
  }

问题是当我删除一些不是最后添加的选项卡的选项卡时，活动选项卡和索引不一样。有一个plunkr来演示这个问题：http://plnkr.co/edit/02Lll7oPYyvAxcKu5GkK?p=preview正如你所看到的，当一个标签（没有最后一个）被删除时，“标签”和“索引”变量是不一样的。

有什么想法吗？

Answer 1

目前，角度引导程序不支持动态生成选项卡。但是，如果您希望$timeout解决方案有效。 您可以从here
了解更多信息

您需要为timeout定义一个功能，无论何时添加新标签或删除任何现有标签，都需要选择标签。它取选项标签列表中的最后一个标签。

function callTimeOut(tabNoIndex) {

        $timeout(function() {
          $scope.active = tabNoIndex;
        }, 0);
      }

您的制表符数组看起来应该像tabNo一样作为闭包属性。由于 uitab在删除或添加标签ID时没有重新排列标签ID，因此系统会跟踪到目前为止没有创建的标签。您必须处理此标签。

$scope.tabs.push({
          heading: 'new',
          content: 'ddddddd',
          id: ++tabNo
        });

您的添加和删除功能应如下所示。

$scope.add = function() {
        $scope.tabs.push({
          heading: 'new',
          content: 'ddddddd',
          id: ++tabNo
        });

        callTimeOut($scope.tabs.length);

      }


      $scope.remove = function(index) {
        $scope.tabs.splice(index, 1);

        var tabIndex = $scope.tabs[$scope.tabs.length - 1].id;
        callTimeOut(tabIndex);
      }

这是工作Plunker

Answer 2

老问题，但我偶然发现了，所以其他人也可能。

我通过深度克隆包含选项卡的数组来解决此问题。

所以这里是：

$scope.remove = function(index) {
    $scope.tabs.splice(index, 1);
    $scope.tabs = angular.copy($scope.tabs);
    $timeout(function() {
        // need timeout, so that tab already exists when we set it active
        $scope.active = $scope.tabs.length;
    });
}

AngularJS - 删除一个后设置活动tabset

2 个答案: