I'm currently working on an app with the MEAN stack. I've managed to dynamically add form elements, but I'm running into an issue where all dynamically added elements are taking the same data when I use ng-model="something.something". What I really want is to store the data as objects inside an array. Any help would be greatly appreciated.
Below is my 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>
And here is my JavaScript code:
vm.academic = [{}];
vm.add = add;
function add() {
console.log('button clicked');
vm.academic.push({
degree:'',
university:'',
grade:''
});
};
I'm struggling to figure out how to set different ng-models for each field so that I can save the data in a database. Any suggestions?