html - 无法使用 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>