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

Question

我有以下示例模型：

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

我渲染成两个不同的 tables

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

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

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

我需要做什么才能自动将更改存储在原始文件中型号？
如果这不可能，我怎样才能从我的 table 中获得 Json 模式就像 table 的渲染源一样，所以我只需要覆盖旧的？

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，那么您需要将数据结构更改为对象数组，每个对象具有相同的属性键名

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

Keep dynamic table synced with model in AngularJS

data-binding

binding

model

html-table

angularjs