Angularjs dynamic binding for ng-model

Question

Here is the Plunker that describe my problem with dynamic binding in Angularjs.

http://plnkr.co/edit/fGgtOZ5IrJVo9QasQALc?p=preview

Before using Angularjs, I am used to using the input name/value like the following to generate desirable data structure for back end processing

<input type="text" name="computer[details][][purchaseddate]" />

<input type="text" name="computer[details][][warrantyperiod]" />

With Angularjs ng-model, it is possible to bind a complex data structure like

<input type="text" ng-model="computer.parts[0].name" />

However it does not work with dynamic property like the following:

<input type="text" ng-model="computer.details[0].name" />

Angular keeps telling me that I am trying to set property 'name' to undefined 'details[0]', I am aware of that but are there any ways to get the same behavior with previous input's name/value where I can specify dynamic property without having to declare it first?

Thank you,

Can you describe your use case why you would want to do this? — Vincent Ramdhanie
– Vincent Ramdhanie, Commented Jun 25, 2013 at 16:46

Sylvain · Accepted Answer · 2013-06-25 17:03:05Z

3

Binding to attributes that don't exist yet works. You can bind to a.b.c even if $scope.a does not exists. Angular creates the objects and attributes on-the-fly.

<input type="text" ng-model="a.b.c" />

But you are trying to bind to an array element that does not exist yet:

<input type="text" ng-model="a.b[0].c" />

Angular would have instantiate the array and then push an empty object in it and then assign it's name. Apparently this does not work.

answered Jun 25, 2013 at 17:03

Sylvain

19.3k26 gold badges103 silver badges148 bronze badges

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

Comments

motoman · Accepted Answer · 2014-12-09 17:39:01Z

1

I ran into the same situation and tried everything.

This is how I was able to get dynamic values inside 2 deep ng-repeat:

JS:

$scope.newContact = {
    name: [],
    phone: [],
    email: [],
    notes: []
};

$scope.saveNewContact = function (idx) {
    console.log($scope.newContact.name[idx]);
};

HTML:

<input type="text" ng-model="newContact.name[$index]" />
<input type="text" ng-model="newContact.phone[$index]" />
<input type="text" ng-model="newContact.email[$index]" />
<input type="text" ng-model="newContact.notes[$index]" />
<button ng-click="saveNewContact($index)">Save</button>

answered Dec 9, 2014 at 17:39

motoman

1413 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angularjs dynamic binding for ng-model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related