How to fetch data from Angular JS forms

Question

I have created a plunker here: http://plnkr.co/qbWBFo that shows a form that I am auto filling based on some json (keys). When the user hits submit, I need to access all data that was filled in and create a json like shown below. Obviously if the div named "myform.rows" had static fields I would be able to call $scope.myform.rows. and get all data. Any suggestions? Thank you

UPDATE: The json that I want to get when a user hits submit after filling out all the form fields is something like this:

{

  "Date Of Birth": {
          "value": "19 May, 1990",
          "tag": "a"
  },
  "Employer": {
          "value": "Starbucks",
          "tag": "b"
  },
  "First Name": {
          "value": "Jane",
          "tag": "a"
  },
  "Last Name":{
          "value": "Doe",
          "tag": "c"
  },
  "Middle Name": {
          "value": "K.",
          "tag": "c"
  },
  "Place Of Birth": {
          "value": "Houston, Texas",
          "tag": "d"
  }

}

Answer 1

Use ng-model on your form controls. This will automatically bind to same variable in your scope.

Say you start an object in scope: $scope.myFormData={} ;

Then add to inputs ng-model ;

<input ng-model="myFormData.name"/>
<input ng-model="myFormData.phone"/>

As user types the myFormData object will be automatically updated with whatever ng-model 's that match that object

Then within submit method, you send that object to server.

DEMO

Answer 2

Following should work for you:

<input type="text" ng-model="formData[k]"/> Where k is the key/property of the JSON.

I have created Plunkr here: http://plnkr.co/edit/hyBFpRr3OOtanuYsGibs