AngularJS

Question

我有一个代码，其中包含一个带有 ng-click 的按钮，当按下它时，它会向选项卡数组添加一个新选项卡。

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

此外，每个选项卡都有一个调用此函数的删除 link：

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

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

有什么想法吗？

Answer 1

Currently the angular bootstrap doesn't support generating tab dynamically. But if you want $timeout solution worked. you can read more from here

您需要为 timeout 定义一个函数，它会在您要添加新选项卡或删除任何现有选项卡时确保选中选项卡。它采用选项卡列表中最后一个选项卡的 ID。

function callTimeOut(tabNoIndex) {

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

您的选项卡数组应该看起来像这个带有 tabNo 作为闭包属性的数组。这将跟踪到目前为止创建的选项卡数量，因为 uitab 在删除或添加选项卡 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 - 删除一些后设置活动标签集

AngularJS - Set active tabset after delete some one

closures

angular-ui-bootstrap

angular-ui-tabset