AngularJS: 将对象的 属性 绑定到 ngModel

Question

我正在制作一个表单组件，它允许您提供值列表并显示列表中每个值的 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>

Answer 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>

If however, if we specifically want ngModelProperty to be optional, ngModelProperty: "@?", the solution is less straightforward.
As soon as I find a solution for this, I'll post the answer here.

Answer 2

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

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

</div>

类似的东西？

Answer 3

您可以使用

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

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