0

我有一个代码，其中包含一个带有 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>

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

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

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

请问有什么想法吗？

4

2 回答 2

0

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

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

所以这里是：

$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;
    });
}
于 2019-05-17T08:10:33.920 回答
0

目前角度引导不支持动态生成选项卡。但是，如果您希望$timeout解决方案有效。 你可以从这里阅读更多

您需要定义一个函数，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

于 2016-08-13T18:06:03.803 回答