javascript - getting data from dynamically added form in angular -


i'm developing app using mean stack. i'm able add form elements dynamically cannot inserted data in ng-model. if put ng-model="something.something" every dynamically added form elements takes same data. wish take data in form of object inside array.i appreciate response.

here 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 js code

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

how different ng-model different fields save data in database?

this html code format html

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

and in controller initialize vm.academic = [{}]; , call add , remove methods follows

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

you'll in output result [{'name':'a','email':'bb'},{'name':'c','email':'dd'}]


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -