1

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?

4

1 回答 1

1

正如@Yoshi 所建议的那样，在嵌套范围内使用对象继承而不是原始的总是最容易的。

 $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

于 2013-04-27T23:57:27.383 回答