ユーザの選択に基づいて入力フィールドを動的に追加する

Question

私はASP.NETモデルにFieldItems辞書を持っています。この辞書は次のような値を持っています。

年齢 - チェックボックス、 名 - テキスト、 会社 - 私は辞書で使用可能なキー、値のペアに基づいてコントロールを作成していた私の見解ファイルのテキスト

。

<div class="@Model.CssClass sf-fieldWrp"> 
<table> 
    <tr> 
     <td> 
      <table> 
       @foreach (var item in Model.FieldItems) 
       { 
        <tr> 
         @if (item.Value == "checkbox") 
         { 
          <td>@item.Key</td> 
          <td> <input id="associationCheckbox" type="@item.Value" name="@item.Key" placeholder="@item.Key" value="false"/></td> 
         } 
         else 
         { 
          <td>@item.Key</td> 
          <td> <input type="@item.Value" name="@item.Key" value="@Model.Value" placeholder="@item.Key" /> </td> 
         } 
        </tr> 
       } 
      </table> 
     </td> 

     <td> 
      <span> 
       <button type="button" class="btn btn-success" style="float:none;cursor:pointer" ng-click="RemoveWidget()">AddPerson</button> 
      </span> 
     </td> 
    </tr> 

</table> 
<span> 
    <button type="button" class="btn btn-danger" style="float:none;cursor:pointer" ng-click="AddWidget()">Remove</button> 
</span> 

</div> 

私の私の要求は、ボタンのクリックに基づいて選択したフィールドを含める/削除することです。ラフなデザインは以下のように見えます。この実装にはいくつかの提案をお願いしますか？

この順番で画像を確認してください。 1.初期2. AfterAdd 3. AfterRemove

Intial

AfterAdd

AfterRemove

枚の

画像はリンクします

おかげで、jQueryの.clone()と.remove()機能を使用して、非常に単純な問題である Balu

Answer 1

。

私はここで実証するplunkerを作成： http://plnkr.co/edit/Kf0Vxn?p=preview

今それだけで値を含む最後の1をクローン。

希望に役立ちます。