Angular将ng-repeat输入值存储到模型中



我在填充输入值数组时遇到麻烦。我想我知道为什么,但我似乎无法绕开它。

为数组 selecteattributes []中的每个项创建一个输入元素。我希望将每个输入元素的值以及属性存储到NEW对象中,从而创建散列/映射。

现有数组: selecteattributes ["attribute1",...."attribute_N")

:

{attribute1:'inputValue1', attribute2:'inputValue2'...}

到目前为止,不能工作的HTML

    <tbody>
        <tr ng-repeat="attribute in selectedAttributes">
            <td><a>{{attribute}}</a></td>
            <td> ---> </td>
            <td><input ng-model="formFields.attribute" class="field" id="{{attribute}}" type="text" >   </td>
        </tr>
    </tbody>

如果这是不可能的,我认为将输入值存储到一个数组中,然后将selectedatattributes[]与输入值列表结合起来是可以的,但我更愿意避免这种情况。

谢谢!

我不确定是否理解了你的问题。但这里你可以看到如何动态添加字段。也许经验Angularjs在各种表单中动态添加表单字段

您是否尝试过在ng-model中使用formFields[attribute]

您需要一个事件来调用一个函数来保存新值到数组中。

下面是一个例子。

http://plnkr.co/edit/wibVbsesfahxmvfLpJ4H

编辑:

添加了一个指令,这样你就可以通过点击按钮或在value字段中输入键来保存新条目。

答案是下面两个答案的组合,但都对我解决这个问题很有帮助。现在很明显我明白是怎么回事了,所以如果有人认为我足够聪明,我向你道歉。我需要用属性的空值初始化对象,然后使用formFields[attribute]将输入值绑定到attribute_N。

认为问题是(希望在这里确认/更正):ng-repeat为selectedatattributes数组中的每一项创建一个新的输入元素,这很好,但它也为每一行创建了一个新的作用域。所以ng-model绑定到当前作用域。这意味着如果在ng-model=formFields中存储任何内容,下一个作用域将创建一个新的formFields并添加新作用域的值。

此外,如果你从来没有定义你的模型的"类型"(数组vs对象),我认为角不做任何假设,所以它只是抛出"未定义"是安全的如何将值存储到一个模型。

<

解决方案/strong>因此,直观地说,你会首先在控制器中创建模型,然后初始化类型,并在视图中动态推送值。

。在控制器中,用map中键的空值初始化新对象。

$scope.formFields = {};

b。现在对象有了键,所以我们可以使用ng-model将输入字段的值绑定到使用object[key]方法的键。

   <tbody>
    <tr ng-repeat="attribute in selectedAttributes">
        <td><a>{{attribute}}</a></td>
        <td> ---> </td>
        <td><input ng-model="formFields[attribute]" class="field" id="{{attribute}}" type="text" >   </td>
    </tr>
 </tbody>

我将避免标记作为答案,因为我想要一个最佳实践作为答案给未来的人和我自己。

这是不好的做法吗?为什么或者为什么不呢?更好的是什么?

最新更新