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

Iショーの非表示のためだけに作られた使用UIB-タブセットのデフォルトの属性なので、私たちは必要としないNG-クリック=「selectTab（$インデックス）」それはラインの下で使用されているよう

<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要素を作成します。以下のコードを参照してください。また、1つのプランを作成しました。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> 

これがあなたの問題を解決することを願っています。ここで、異なるフォームは異なるデータを取得します。あるフォームに挿入されたデータは別のフォームに上書きされません。