Daten aus dynamisch hinzugefügtem Formular in eckigen erhalten

Question

Ich entwickle eine App mit MEAN Stack. Ich kann Formularelemente dynamisch hinzufügen, aber keine Daten in mein ng-Modell einfügen. Wenn ich ng-model="something.something" gebe, dann nimmt jedes dynamisch hinzugefügte Formularelement dieselben Daten an. Ich möchte Daten als Objekt in einem Array aufnehmen. Ich würde jede Antwort sehr begrüßen.

Hier ist mein HTML-Code:

<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> 

und mein js Code ist

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

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

Wie kann ich ein anderes ng-Modell für verschiedene Felder erhalten die Daten in der Datenbank zu speichern?

Answer 1

Dies ist der HTML-Code, den Sie Sie

<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> 

Und Sie Controller vm.academic = [{}]; initialisieren und rufen hinzufügen und Methoden entfernen wie folgt erhalten in

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

Sie werden im HTML-Format würde helfen Ausgabeergebnis als [{'name':'a','email':'bb'},{'name':'c','email':'dd'}]