Question

我在AngularJS中有一个类似结构的模型：

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

我希望能够在表单中显示和修改此模型。目前我已经嵌套了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>

（注意：我已将AngularJS括号重新定义为＆lt; %%＆gt;）。

我可以修改名称，但是AngularJS阻止我甚至输入内部输入。我猜我没有正确绑定模型？另外，我如何添加另一个具有名称和版本列表的“物质”？

是否有正确的方法来命名我的输入？

Answer 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

使用嵌套列表在AngularJS中创建动态表单

1 个答案: