Question

1：

<ul>
    <li ng-repeat="item in items">
        <label>{{item.name}}</label>
        <input type="text" ng-model="newObject[$index]"> // this works fine
   </li>
</ul>

2：

 <ul>
    <li ng-repeat="item in items">
        <label>{{item.name}}</label>
        <input type="text" ng-model="newObject.something[$index]"> // this is not working
   </li>
</ul>

在角度控制器中，

$scope.newObject = {};
$scope.items = [{name:'foo'}, {name:'bar'}, {name:'baz'}];

1 按预期工作。但 2 不能像以前那样工作，在文本框中输入Cant类型。这里发生了什么，我该如何解决这个问题。谢谢:)）

更新

通过在控制器中添加此行来解决此问题

$scope.newObject.something = {};

但是我不知道它的工作原理，有人可以解释一下吗？

Answer 1

因为something上的属性newObject在您定义之前不存在 - 所以在尝试绑定回模型时会抛出错误。

首先声明你的模型：

$scope.newObject = {
    something: {}
}

$scope.newObject[$index]在$index上查找newObject属性 - 如果找不到，则会创建它。当您$scope.newObject.something[$index]时，它会查找something属性 - 找不到它，因此无法更深入地绑定到额外的$index属性1层。

简单的JavaScript：

var myObj = {};
myObj.something = "k"; //works fine
myObj.something.somemore = "x"; //works fine
myobj.somethingnew.somemorenew = "j"; //throws error because the property "somethingnew" doesn't exist, therefore "somemorenew" cannot be created as a child property

解释这种动态ng模型的不同行为？

1 个答案: