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>

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

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属性的双向绑定。

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

3 个答案: