值被复制到使用 ng-repeat 和 ng-model 创建的所有输入字段中

Question

我正在使用 ng-repeat 动态创建输入字段，一切似乎都工作正常并且输入字段已创建但是由于某种原因当我在创建的输入字段中输入一些值时由于某种原因对于双向数据绑定，在创建的所有文本字段中同时输入值。

据我所知，我正在为每个创建的字段分配不同的 ng-model，所以我不确定为什么要复制这些值。当我尝试打印分配给该字段正上方的输入字段的值时，我看到 id 不同想知道为什么所有字段都采用相同的值以及如何防止它。

HTML Code:

<tr>
    <td ng-repeat="extension in ExtensionList">
        <!-- Here the value displayed are different -->
        {{ formdata.extension.ExtensionVlaues }}
        <input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
    </td>
</tr>

这是前端的截图：

这里是我的例子ExtensionList：{"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}

据我所知，给定的 ng-model 有所不同，但仍然无法正常工作。谁能帮我解决这个问题？我尝试了一些类似 ng-model="formdata.extension[ExtensionVlaues]" 的方法，但仍然没有成功。

我试过像这样分配 ng-model 但它不起作用：

ng-model="formdata.extension[ExtensionVlaues]"

根据下面的回答，我尝试了 2 种不同的方法，但它不起作用并且遇到了同样的问题。请告诉我如何解决这个问题：

<td ng-repeat="(key, extension) in ExtensionList">
    <input type="text" ng-model="formdata.extension.key">
</td>

<td ng-repeat="(key, extension) in ExtensionList">
    <input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>

Answer 1

您正在尝试将 ExtensionList 用作数组。您需要将其用作带有 ng-repeat 的对象：

<td ng-repeat="(key, extension) in ExtensionList">
    <input type="text" ng-model="formdata[extension][key]">
</td>

<td ng-repeat="(key, extension) in ExtensionList">
    <input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>

Answer 2

万一其他人也遇到了这个问题：

<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
    <br/>                                       
    <span>
        {{ extension.NameSpace + ":" + extension.LocalName }}
    </span>&ensp;
    <input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>

值被复制到使用 ng-repeat 和 ng-model 创建的所有输入字段中

Values are duplicated into all input field which is created using the ng-repeat and ng-model

angularjs

angularjs-directive

angularjs-ng-repeat

ng-bind-html

angular-ngmodel