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

下面是更正后的代码，您需要在同一个标签对象中添加模型属性。你使用过ng-if =＆＃34; tab.display＆＃34;在隐藏所有其他标签的uib-tab上，应删除它。

<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

我刚刚为show hide使用了uib-tabset默认属性，所以我们不需要ng-click =＆＃34; selectTab（$ index）＆＃34;因为它在下面的行中使用

<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元素。参考下面的代码。另外，为它创建了一个plunkr 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>

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

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

2 个答案: