AngularJS - Form data

Question

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: http://jsfiddle.net/nicktest2222/AB5Yw/2/

Any help would be greatly appreciated. Thanks in advance.

HTML

<form ng-submit="addTodo()"> <span ng-repeat="t in todos[0].Collection.InputList"> <label>{{t.DisplayName}}</label> <input type="text" name="{{t.FieldName}}"><br> </span> <br> <input class="btn-primary" type="submit" value="Add"> </form> 

JS

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 = ''; }; 

}

Answer 1

You need to bind the input elements to a model

I would add to the controller

$scope.formData = {}; 

and on the view change the input to

<input type="text" ng-model="formData[t.FieldName]"> 

Then inside the addTodo you can use

$scope.formData.dpFname $scope.formData.dpMname $scope.formData.dpLname 

Demo athttp://jsfiddle.net/AB5Yw/4/

Answer 2

http://jsfiddle.net/EXcqQ/ is working now. Essentially you're needing to iterate through the InputList object as if it were an array. Fortunately Angular has a way to do this:

<span ng-repeat="(key, data) in todos[0].Collection.InputList[0]"> 

Notice, I also had to include the zero index on InputList to iterate through just the first object.