クローンdiv内のデータを投稿する角度ジェネレーター

Question

クローンdivは、追加ボタンをクリックすると繰り返されます。 フィールドをclone div内に投稿する方法を教えてください。

<div class="row" id="append-row"> 
      <div class="clone-div-{{count}}" id="clone-div"> 
       <div class="col-md-6"> 
        <div class="form-group input-group-sm"> 
         <label>Title</label> 
         <input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter.title"> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="form-group input-group-sm"> 
         <label>Select Language</label> 
         <select class="form-control" name="country" id="country" ng-model="chapters.chapter.languageID" ng-options="value.ID as value.language for value in technical.languages">    
          <option value="">Select Country</option> 
         </select> 
        </div> 
       </div> 
      </div> 
     </div> 

この部分はangularjsコードです。

$scope.count = 1; 
$scope.addChapter = function() { 
    var iEl = angular.element(document.querySelector('#append-row')); 
    var wEl = angular.element(document.querySelector('#clone-div')); 
    iEl.append(wEl.clone()); 
    $scope.count+=1; 
}; 

Answer 1

テンプレート内でng-repeatでクローニング/リピートを行い、事前にデータを準備する必要があります。これははるかにクリーンな方法です。たとえば、テンプレートコードではすべてのngモデルが同じであることがわかります.1つの 'クローン' divまたは100がある場合、常に同じ情報が表示されます。

より良い方法は、あなたのクローンdivがテンプレートに書いて、例えば、繰り返し可能ngのテンプレート「スクリプト」としてそれを使用する：あなたはモデルの一部として、NGリピートから生じる$インデックスを使用することができます

// main template 
<script type="text/ng-template" id="cloneable.html"> 
    // Your code here, but change reference to ng-model, ie this line as an example: 
    <input type="text" class="form-control" id="addTitle" placeholder="Title" ng-model="chapters.chapter[$index].title"> 
</script> 

// main template, your new repeat then includes the repeatable script 
<div ng-repeat="foo in manyFoos" 
    ng-include="'cloneable.html'"></div> 

この方法個々のリピートブロックを正確に分離することができます。あなたのコントローラでは、chapters.chapterはオブジェクトの配列になります。

「追加」ボタンの部分や追加する情報についてはわかりませんが、上記の問題がモデルの問題を処理する必要があります。