Creating a dynanic form in AngularJS with nested lists

Question

I have a model in AngularJS that is structured like so:

region = { 'substances': [ 
{ 'id': 123, 'name': 'Hello', 'versions': ['A', 'B', 'C'] }, 
{ 'id': 456, 'name': 'World', 'versions': ['A', 'B', 'C'] } 
]}

I want to be able to display and modify this model in a form. Currently I have nested ng-repeats:

<ul>
    <li ng-repeat="substance in region.substances">
        <input name="substance[]" class="input-medium" type="text" ng-model="substance.name">
        <ul>
            <li ng-repeat="version in substance.versions">
                <input style="margin-left: 10px;" type="text" name="<% substance.id %>.version[]" class="input-medium" ng-model="version">
            </li>
        </ul>
    </li>
</ul>

(Note: I've redefined AngularJS brackets to be <% %>).

I can modify the name, but I AngularJS prevents me from even typing in the inner inputs. I'm guessing that I'm not binding to the model correctly? Also, how would I go about adding another "substance" that has a name and a list of versions?

Is there a proper way to be naming my inputs?

I guess changing the list of versions from literals to objects would greatly ease things here. — Yoshi
– Yoshi, Commented Apr 27, 2013 at 17:29
There is nothing wrong with the way you named the inputs, I guess this is a problem with Angular, because It is not binding correctly. Check this jsBin to see that the binding works when we point to the parent attribute. — Bertrand
– Bertrand, Commented Apr 27, 2013 at 19:32

charlietfl · Accepted Answer · 2013-04-27 23:57:27Z

1

As suggested by @Yoshi , is always easiest to use object inheritance rather than primitive within nested scopes.

 $scope.region = { substances: [ 
  { name: 'Hello', versions: [{x:'A'},{x: 'B'},{x: 'C'}] }, 
  { name: 'World', versions: [{x:'A'},{x: 'B'},{x: 'C'}] } 
]};

<ul>
  <li ng-repeat="substance in region.substances">
    <input class="input-medium" type="text" ng-model="substance.name">
    <ul>
     <li ng-repeat="version in substance.versions">
       <input type="text" ng-model="version.x">
     </li>
   </ul>
  </li>
</ul>

Demo

answered Apr 27, 2013 at 23:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Creating a dynanic form in AngularJS with nested lists

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related