動的に追加されたフォームからデータを取得する

Question

MEANスタックを使用してアプリケーションを開発しています。フォーム要素を動的に追加することはできますが、ng-modelに挿入されたデータを取得することはできません。もし私がng-model="something.something"を入れたら、すべての動的に追加されたフォーム要素は同じデータを取ります。私は配列の中のオブジェクトの形でデータを取りたいと思っています。私は本当にどんな応答にも感謝します。

<div layout-gt-sm="row" ng-repeat="(key,aca) in vm.academic"> 
       <md-input-container class="md-block" flex-gt-sm> 
        <label>Degree</label> 
        <input name="degree" ng-model="vm.academic[key].degree"> 
       </md-input-container> 
       <md-input-container class="md-block" flex-gt-sm> 
        <label>University/Board</label> 
        <input name="university" ng-model="vm.academic[key].university"> 
       </md-input-container> 
       <md-input-container class="md-block" flex-gt-sm> 
        <label>Percentage/Grade</label> 
        <input name="grade" ng-model="vm.academic[key].grade"> 
       </md-input-container> 
      </div> 
      <div layout="row" layout-align-gt-sm="end"> 
       <md-button class="btn1" aria-label="add button" ng-click="vm.add();"> 
        <md-icon md-svg-icon="plus"></md-icon> 
        <md-tooltip md-direction="top"> 
         Add more field 
        </md-tooltip> 
       </md-button> 
      </div> 

と私のjsのコードがどのように私は、データベース内のデータを保存するために、異なる分野ごとに異なるNG-モデルを得るのですか

vm.academic = [{}]; 
    vm.add = add; 

    function add() { 
    console.log('button clicked'); 
    vm.academic.push({ 
     degree:'', 
     university:'', 
     grade:'' 
    }); 
}; 

次のとおりです。ここで

は私のhtmlコードはありますか？

Answer 1

これはあなたが

<form name="FormName" novalidate> 
     <div layout-gt-sm="row" ng-repeat="aca in vm.academic"> 
      <md-input-container class="md-block" flex-gt-sm=""> 
       <label>Name</label> 
       <input type="text" ng-model="aca.name" > 
      </md-input-container> 
      <md-input-container class="md-block" flex-gt-sm=""> 
       <label for="email">Email Id</label> 
       <input type="email" ng-model="aca.email"/> 
      </md-input-container> 
     </div> 
    </form> 

をHTMLとあなたの中に、コントローラvm.academic = [{}]; を初期化し、あなたが買ってあげる

vm.addNewAcademic = function(){ 
    vm.academic.push({}); 
}; 
vm.removeAcademic = function() { 
    var num = vm.academic.length-1; 
    if (num !== 0) { 
     vm.academic.pop(); 
    } 
}; 

を次のようにメソッドを追加し、削除を呼び出し、フォーマット役立つだろうhtmlコードです出力結果を[{'name':'a','email':'bb'},{'name':'c','email':'dd'}]