AngularJS：将对象的属性绑定到 ngModel答案

【问题标题】：AngularJS: Binding a property of an object to ngModelAngularJS：将对象的属性绑定到 ngModel
【发布时间】：2017-05-09 05:44:38
【问题描述】：

我正在制作一个表单组件，它允许您提供一个值列表并为列表中的每个值显示input[number] 字段。
问题是它是一个对象列表，而不是数字原语，我需要一种在我的输入和每个对象中的数字属性之间建立数据绑定的好方法。
这个数字属性将通过我的组件上的范围属性动态设置。

我的数据可能如下所示

$scope.ngModelList = [{foo: 'bar', num: 1}, {foo: 'baz', num: 3}];

我的输入看起来有点像这样

<div class="inputs"
    data-ng-repeat="model in ngModelList">

    <input type="number"
        data-ng-model="model">

</div>

【问题讨论】：

标签： angularjs data-binding angular-ngmodel

【解决方案1】：

假设我们要绑定的对象属性要么是固定的（不是很有用），要么如果我们要求它始终存在，答案相当简单。

我们只需要属性名称作为指令的属性之一，例如ngModelProperty 并有以下解决方案。

directive("multiNumberForm", function () {
    return {
        scope: {
            ngModelList: "=", // Array<Object> of models to bind to
            ngModelProperty: "@" // Property of each Object for actual binding
        }
        ...
    }
};

在我们的模板中

<div class="inputs"
    data-ng-repeat="model in ngModelList">

    <input type="number"
        data-ng-model="model[ngModelProperty]">

</div>

但是，如果我们特别希望 ngModelProperty 是可选的 ngModelProperty: "@?"，则解决方案就不那么简单了。
一旦找到解决方案，我将在此处发布答案。

【讨论】：

【解决方案2】：

<div class="inputs"
    data-ng-repeat="model in ngModelList">

    <input type="number"
        data-ng-model="model.foo">

</div>

类似的东西？

【讨论】：

ngModel 属性是双向绑定的，所以你需要去掉那些花括号。 data-ng-model="model.foo"

【解决方案3】：

你可以使用

<div class="inputs" data-ng-repeat="model in ngModelList">
    <input type="number" data-ng-model="model.num">
</div>

当您将 model.num 用作 ngModel 时，它将以 2 方式绑定到该特定模型的 num 属性。

【讨论】：