current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

}
share|improve this question

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer
    
Thankyou. I left out crucial information. Please see the update above. –  chapstick Oct 29 '13 at 19:18
    
I have updated the above plunkr. Please have a look at it. –  Vijay Pande Oct 29 '13 at 21:12
    
Thanks vijay for the update. –  chapstick Oct 30 '13 at 18:32
up vote 1 down vote

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

share|improve this answer
    
Thankyou. I left out crucial information. Please see the update above. –  chapstick Oct 29 '13 at 19:23
    
what do you mean please update the above? Glad to help answer problems but this isn't a code this for me site –  charlietfl Oct 29 '13 at 19:29
    
After seeing yours and vijay's response I realized that I left out crucial detail of what I was trying to get the final/result json to look like. And just to answer your concern, I am very new to AngularJS and if I was trying other people to do the code for me, I won't have bothered to set up a Plunker. Thanks for your time. –  chapstick Oct 29 '13 at 19:40
    
well try adapting what I gave you to your situation. WHen you run into problems can get more specific helping –  charlietfl Oct 29 '13 at 19:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.