ng-model 的 Angularjs 动态绑定答案

【问题标题】：Angularjs dynamic binding for ng-modelng-model 的 Angularjs 动态绑定
【发布时间】：2013-06-25 16:34:03
【问题描述】：

这是描述我在 Angularjs 中的动态绑定问题的 Plunker。

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

在使用 Angularjs 之前，我习惯于使用如下输入名称/值来生成所需的数据结构以供后端处理

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

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

使用Angularjs ng-model，可以绑定复杂的数据结构，比如

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

但它不适用于如下动态属性：

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

Angular 一直告诉我，我正在尝试将属性“名称”设置为未定义的“详细信息 [0]”，我知道这一点，但有什么方法可以在我可以的情况下获得与先前输入的名称/值相同的行为无需先声明即可指定动态属性？

谢谢，

【问题讨论】：

您能描述一下您的用例为什么要这样做吗？

标签： angularjs

【解决方案1】：

绑定到尚不存在的属性有效。即使 $scope.a 不存在，您也可以绑定到 a.b.c。 Angular 即时创建对象和属性。

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

但是你正在尝试绑定一个尚不存在的数组元素：

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

Angular 将实例化该数组，然后将一个空对象推入其中，然后为其指定名称。显然这不起作用。

【讨论】：

【解决方案2】：

我遇到了同样的情况并尝试了所有方法。

这就是我能够在 2 个深度 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>

【讨论】：