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

};

}

Gabriele Petrioli · Accepted Answer · 2013-07-23 17:02:56Z

2

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 at http://jsfiddle.net/AB5Yw/4/

answered Jul 23, 2013 at 17:02

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sharondio · Accepted Answer · 2013-07-23 16:09:17Z

1

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.

answered Jul 23, 2013 at 16:09

Sharondio

2,61415 silver badges16 bronze badges

2 Comments

Nick Over a year ago

Hi, Sharondio. Thank you for your reply, however I think you're missing my problem. I'm building the form as I need it, I'm just not able to add a new record using the form input values. When pushing a value to my dataset via the "addTodo" function, I'm not able to access my input values from the form that I've built dynamically. Does that make sense?

Sharondio Over a year ago

Ah, sorry about that. jsfiddle.net/882VW/1 Here you want to use the $index and the $parent.$index values to tie the ng-model to the right item in the original model.

Collectives™ on Stack Overflow

AngularJS - Form data

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related