无法使用uib-tabset正确创建选项卡

Question

我一直在尝试用uib-tabset动态创建标签，每个标签应该包含不同的表单，但在我的例子中，第一个表单的文本框被生成的新标签覆盖(如果我在一个表单中输入数据，它会复制到其他表单)。我希望所有选项卡都包含不同的数据。

<uib-tabset class="nav nav-tabs" role="tablist" >
<uib-tab  role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}" ng-if="tab.display">
 <uib-tab-heading> 
    <a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">{{tab.value}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
 </uib-tab-heading>
 <div class="panel-body" ng-if="tab.display" >
   <form ng-submit="addattributevalues()">
     <div class="form-group">
       <label class="col-sm-2 control-label">Regular Price:</label>
       <div class="col-sm-10">
          <input  type="text" class="form-control"  ng-model="obj.regularPrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Sale Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="obj.salePrice" >
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Purchase Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="obj.purchasePrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Stock Status:</label>
       <div class="col-lg-offset-2 col-lg-10>
          <button class="btn btn-sm btn-white" type="submit" >Submit</button>
       </div>
   </form>
 </div>
</uib-tab>
</uib-tabset>

Answer 1

下面是经过更正的代码，您需要在相同的选项卡对象中添加模型属性。并且您已经在uib-tab中使用ng-if="tab.display“，它隐藏了所有其他选项卡，应该将其删除。

<uib-tabset class="nav nav-tabs" role="tablist" >
<uib-tab  role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)">
<uib-tab-heading> 
   <a href="#" aria-controls="home" role="tab" data-toggle="tab">{{tab.value}} 
   <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
 </uib-tab-heading>
 <div class="panel-body">
   <form ng-submit="addattributevalues()">
     <div class="form-group">
       <label class="col-sm-2 control-label">Regular Price:</label>
       <div class="col-sm-10">
          <input  type="text" class="form-control"  ng-model="tab.regularPrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Sale Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="tab.salePrice" >
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Purchase Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="tab.purchasePrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Stock Status:</label>
       <div class="col-lg-offset-2 col-lg-10">
          <button class="btn btn-sm btn-white" type="submit" >Submit</button>
       </div>
   </form>
 </div>
</uib-tab>
</uib-tabset>

Answer 2

我刚刚使用uib-tabset的默认属性来显示隐藏，所以我们不需要ng-click="selectTab($index)“，因为它在下面的代码行中使用

<uib-tab  role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}" ng-if="tab.display">

我使用<uib-tabset active="active">是因为它会自动创建相应的dom元素。请参考下面的代码。此外，还为它创建了一个https://plnkr.co/edit/QxcOyFir8oYS53asDlMN?p=preview

<uib-tabset  active="active" >
<uib-tab  role="presentation" ng-repeat="tab in tabs" heading="{{tab.title}}" >

 <uib-tab-heading> 
    <a data-target="#tab" role="tab" data-toggle="tab">{{tab.title}} <span  class="glyphicon glyphicon-remove"></span></a>
 </uib-tab-heading>
 <div class="panel-body">
   <form ng-submit="addattributevalues()">
     <div class="form-group">
       <label class="col-sm-2 control-label">Regular Price:</label>
       <div class="col-sm-10">
          <input  type="text" class="form-control"  ng-model="obj.regularPrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Sale Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="obj.salePrice" >
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Purchase Price:</label>
       <div class="col-sm-10">
           <input type="text" class="form-control" ng-model="obj.purchasePrice">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Stock Status:</label>
       <div class="col-lg-offset-2 col-lg-10">
          <button class="btn btn-sm btn-white" type="submit" >Submit</button>
       </div>
     </div>
   </form>
 </div>
</uib-tab>
</uib-tabset>

希望这能解决你的问题。在这里，不同表单获得不同的数据。以一种形式插入的数据不会被覆盖到另一种形式。