Question

在这里使用AngularJS。

我有一个按钮，单击后会提示输入选项卡名称并创建一个新的选项卡。您可以创建尽可能多的选项卡，也可以删除选项卡。在TAB内容中，我有一个表，其表是动态创建的。通过单击表上的“添加列”按钮来创建列。同样，我在这里可以有很多专栏。以上所有工作均可在JSFiddle中看到，如下所示：

http://jsfiddle.net/aman1981/pactnrb0/1/

我正在寻找的是：

1。）创建新选项卡时，该表中的所有内容应为空。目前我拥有的是，如果创建一个新标签，则可以在所有标签上看到相同的内容，或者从该标签移动到其他标签，或者创建一个新标签。

2。）如果我在表中填写了一些数据，然后单击“添加选项卡”或尝试移至其他选项卡，则应该显示一条警告，指出要保存我的更改。

下面是jsfiddle代码中的一个小示例：

 <div class="panel panel-default data-table">
    <div class="panel-heading">
      <ul class="nav nav-tabs">
          <li ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}">
          <a data-target="#tab" aria-controls="home" data-toggle="tab">{{tab.id}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
        </li>
        <li ng-click="addTab()">
          <a aria-controls="home" data-toggle="tab">(+) Add Tab</a>
        </li>
      </ul>
    </div>
 <div class="panel-body table-set-columns">
     //Table data
 </div>
</div>

Answer 1

需要一些更改：

从概念上讲：

最初不显示表格（直到用户添加了标签）。
完成新更改后，您不需要警告消息，因为数据在每个表中都是独立的，因此将（临时）保存在（客户端应用程序中）

代码：

在HTML中，如果选择了一个，则需要显示该表。为此，我们像这样使用ng-if：<table class="table table-bordered" ng-if="targetTable">。 ^已编辑
我们将需要两个变量：tableCounter（用于计数当前有多少个表）和currentTableId（用于在每次创建新表ID时获取一个新表ID。
我们将需要一个名为createTable的新函数，它将返回一个新的表对象。
在addTab函数中，我们现在还将$scope.tables.push(createTable());用于创建新表，并$scope.targetTable = $scope.tables[tableCounter - 1];用于选择作为当前显示内容创建的新表（如刚刚创建的标签）
在addColumn和addNewRow中，我们首先检查是否存在至少一个经过if (tableCounter) {...} ^{编辑的表（即已选择一个表）}
现在在deleteTab函数上，我们也需要做$scope.tables.splice(index, 1);才能删除与已删除标签相对应的表，而$scope.targetTable = $scope.tables[0];则要在默认情况下将所选表设置为第一（仅当至少有一张桌子时）。 ^已编辑
在selectTab函数中，我们现在还需要执行$scope.targetTable = $scope.tables[index];以便选择与所选选项卡相对应的表（仅当存在至少一个表时）。 ^已编辑

请参见 Working JsFiddle （由您提供）

AngularJS：在创建新标签页时重置标签页内容

1 个答案: