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

问题描述

在这里使用 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>

标签： javascriptangularjs

需要进行一些更改：

从概念上讲：

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

代码：

在 HTML 中，如果有一个被选中，我们需要显示表格。为此，我们使用ng-if这样的：<table class="table table-bordered" ng-if="targetTable">. ^已编辑
我们将需要两个变量：（tableCounter用于计算当前有多少表）和currentTableId（用于在每次创建新表时获取新表 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（来自 Yours）

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

问题描述

解决方案

推荐阅读