title: AngularJS - Form data
body: <p>My dataset is returning a list of employees. I'm attempting to use the fields from the first index to build my form for adding new employees. I'm struggling with reading the form field data to add a new employee. Fiddle is here: <a href="http://jsfiddle.net/nicktest2222/AB5Yw/2/" rel="nofollow">http://jsfiddle.net/nicktest2222/AB5Yw/2/</a></p>
  
  <p>Any help would be greatly appreciated. Thanks in advance.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form ng-submit="addTodo()"&gt; 
      &lt;span ng-repeat="t in todos[0].Collection.InputList"&gt;
          &lt;label&gt;{{t.DisplayName}}&lt;/label&gt;
          &lt;input type="text" name="{{t.FieldName}}"&gt;&lt;br&gt;
      &lt;/span&gt;
      &lt;br&gt;    
      &lt;input class="btn-primary" type="submit" value="Add"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function TodoCtrl($scope) {
  $scope.todos = [{
      "Header": "Chris Morgan",
          "Collection": {
          "InputList": [{
              "FieldName": "dpFname",
                  "DisplayName": "First Name",
                  "Required": "1",
                  "AllowEdit": "1",
                  "TabOrder": "1",
                  "InputType": "TEXTBOX",
                  "Style": "",
                  "Validate": "",
                  "InputMask": "",
                  "Options": [],
                  "Value": "Chris"
          }, {
              "FieldName": "dpMname",
                  "DisplayName": "Middle Name",
                  "Required": "0",
                  "AllowEdit": "1",
                  "TabOrder": "2",
                  "InputType": "TEXTBOX",
                  "Style": "",
                  "Validate": "",
                  "InputMask": "",
                  "Options": [],
                  "Value": ""
          }, {
              "FieldName": "dpLname",
                  "DisplayName": "Last Name",
                  "Required": "1",
                  "AllowEdit": "1",
                  "TabOrder": "3",
                  "InputType": "TEXTBOX",
                  "Style": "",
                  "Validate": "",
                  "InputMask": "",
                  "Options": [],
                  "Value": "Morgan"
          }]
      }
  }];
  
  $scope.addTodo = function () {
      $scope.todos.push({
          Header: $scope.dpFname + " " + $scope.dpLname,
          Collection: {
              "InputList": [{
                  "FieldName": "dpFname",
                      "DisplayName": "First Name",
                      "Required": "1",
                      "AllowEdit": "1",
                      "TabOrder": "1",
                      "InputType": "TEXTBOX",
                      "Style": "",
                      "Validate": "",
                      "InputMask": "",
                      "Options": [],
                      "Value": $scope.dpFname
              }, {
                  "FieldName": "dpLname",
                      "DisplayName": "Last Name",
                      "Required": "1",
                      "AllowEdit": "1",
                      "TabOrder": "3",
                      "InputType": "TEXTBOX",
                      "Style": "",
                      "Validate": "",
                      "InputMask": "",
                      "Options": [],
                      "Value": $scope.dpLname
  
              }, {
                  "FieldName": "dpMname",
                      "DisplayName": "Middle Name",
                      "Required": "0",
                      "AllowEdit": "1",
                      "TabOrder": "2",
                      "InputType": "TEXTBOX",
                      "Style": "",
                      "Validate": "",
                      "InputMask": "",
                      "Options": [],
                      "Value": $scope.dpMname
              }
  
  
              ]
          }
  
      });
  
      // Clear form fields
      $scope.dpFname = '';
      $scope.dpLname = '';
      $scope.dpMname = '';
  
  };
  </code></pre>
  
  <p>}</p>