Html 无法使用uib选项卡集正确创建选项卡

我一直在尝试使用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>

{{tab.value}}
正常价格：
售价：
购买价格：
库存状态：
下面是更正的代码，您需要在同一选项卡对象中添加模型属性。如果您在uib选项卡上使用了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>


正常价格：
售价：
购买价格：
库存状态：
提交
我刚刚使用uib tabset default attributes来显示隐藏，所以我们不需要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">



我使用了
，因为它会自动创建相应的dom元素。请参阅下面的代码。此外，还为其创建了一个plunkr


{{tab.title}}
正常价格：
售价：
购买价格：
库存状态：
提交

希望这能解决你的问题。在这里，不同的表单得到不同的数据。以一种形式插入的数据不会覆盖到另一种形式
 指定您正在使用的angular版本以及html中的head（和/或includes）通常很有用。它在我的代码中仍然不起作用，数据正在被覆盖，我已经做了您提到的所有修改，我无法理解为什么它不起作用。您尝试过我提供的plunkr链接了吗。数据没有被覆盖。您还可以尝试先进行单元测试，然后将其合并到应用程序中。请与我们分享您的plunkr或fiddle链接，以便我们可以专门调查您的问题。是的，我已经尝试过了，它不起作用，我想可能是在angular中存在依赖性问题。无论如何，感谢您的帮助。感谢您的建议，现在没有覆盖表单，但现在ng submit已停止工作。我不明白为什么会发生这种情况。表单数据没有与angular的$scope变量绑定。请尝试以下更改
，并在控制器中
$scope.addattributevalues=function（tab）{}
<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>