Javascript AngularJS：在创建新选项卡时重置选项卡内容

在这里使用AngularJS

我点击了一个按钮，提示输入选项卡名称并创建一个新选项卡。您可以创建任意多个选项卡，也可以删除选项卡。在选项卡内容中，我有一个表，它的列是动态创建的。通过单击表上的“添加列”按钮创建列。同样，我可以在这里有很多专栏。以上所有功能都可以在JSFIDLE中看到，如下所示：

我要找的是：

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

2.）如果我在表格中填写了一些数据，然后单击“添加”选项卡或尝试移动到其他选项卡，则会出现一条警告，说明要保存我的更改

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

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

{{tab.id}


（+）添加选项卡


//表数据

需要进行一些更改：

概念上：

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

代码：

• 在HTML中，如果选择了一个表，则需要显示该表。为此，我们使用

  ng if

  如下：
  已编辑
• 我们需要两个变量：

  tableCounter

  （用于计算当前有多少个表）和

  currentTableId

  （用于每次创建新表时获取新表id）
• 我们需要一个名为

  createTable

  的新函数，它将返回一个新的表对象
• 在

  addTab

  函数中，我们现在还将执行

  $scope.tables.push（createTable（））；

  以创建新表，以及

  $scope.targetTables=$scope.tables[tableCounter-1]；

  以选择创建为当前显示的新表（与刚创建的选项卡一样）
• 在

  addColumn

  和

  addNewRow

  中，我们首先用

  if（tableCounter）{…}

  编辑的

• 在

  deleteteTab

  函数中，我们现在还需要执行

  $scope.tables.splice（index，1）；

  以删除与已删除选项卡相对应的表；

  $scope.targetTable=$scope.tables[0]；

  以将所选表默认设置为第一个表（仅当至少有一个表时）。
• 在

  selectTab

  函数中，我们现在需要执行

  $scope.targetTable=$scope.tables[index]；

  以选择与所选选项卡相对应的表。（仅当至少有一个表时）。已编辑

---

请参阅（您的分叉）

感谢您的详细解释。您共享的代码基本上按照预期工作，但这里有两个问题。我不需要定义默认选项卡。用户单击“添加选项卡”，这是创建第一个选项卡时出现的。其次，它在控制台中抛出此错误“angular.js:11358 TypeError:执行此步骤时无法读取未定义的属性'columns'。您创建新选项卡，然后删除它们，然后再次添加新选项卡，现在当您单击add columns时，它会抛出上述错误。我相信上面的错误在“var columns=$scope.targetTable.columns，id=columns.length；“@kaka1234我现在查看一下错误。只是想知道…如果没有默认选项卡，第一个（默认）表不属于任何选项卡？创建第一个选项卡时（由用户创建，没有默认选项卡）创建了一个新表，默认表仍然没有选项卡？如果是这样，您如何再次导航到该表？…或者当用户创建新选项卡时，您应该将默认表与第一个选项卡关联。您能否解释一下这个完整的流如何工作？很好。谢谢您的时间。@kaka1234，是的，我也注意到了。删除此项<代码>{{r.id}来自

并替换为

（这可能需要一些额外的调整）。看到了。现在我想了想，我会要求用户在移动到下一个选项卡之前保存当前表。因此，如果保存当前选项卡，创建新选项卡并向后移动，那么我只需要使用数据库中的现有值填充表，这样就不会出现上述情况。不过，感谢您的帮助。如果需要，我会进一步发布单独的问题呃这个。