保持动态表与AngularJS中的模型同步

Question

我有以下示例模型：

{
 a:{
    x:0,
    z:0,
    f:1
   },
 b:{
   x:"a",
   u:"b"
   }
}

我渲染成两个不同的表

 <div class="col-sm-5">
                <h1>A</h1>
                <table>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                    <tr ng-repeat="(key,value) in schema.a">
                        <td>
                            <input type="text" ng-model="key" required>
                        </td>
                        <td>
                            <input type="text" ng-model="value" required>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-5 col-md-offset-2">
                <h1>B</h1>
                <table>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                    <tr ng-repeat="(key,value) in schema.b">
                        <td>
                            <input type="text" ng-model="key" required>
                        </td>
                        <td>
                            <input type="text" ng-model="value" required>
                        </td>
                        <td></td>
                    </tr>
                </table>
            </div>

表格是动态的，这意味着我可以向其中添加新行。

现在，当我更改表格中的任何值时，它们不会与模型同步 -> 无法编辑

• 如何将更改自动存储在原始文件中 型号？
• 如果这不可能，我如何从我的表中获取 Json 架构 就像表格被渲染的那样，所以我只需要 覆盖旧的？

Answer 1

首先，您不能动态更改对象属性名称或key。因此，您尝试对 ng-model="key" 执行的操作根本行不通。

就value 部分而言，您应该在ng-model 中使用对象引用

<tr ng-repeat="(key,value) in schema.b">
    <td>{{key}}</td>
    <td>
        <input type="text" ng-model="schema.b[key]" required>
    </td>
    <td></td>
</tr>

如果您需要能够编辑key，那么您需要将数据结构更改为对象数组，每个对象的键属性名称都相同