使用嵌套的 ng-repeat 更新对象

Question

JSON结构，

[
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'},
{'col 1':'false','col 2':'false','col 3':'false'}
]

请注意 键中有 space。在控制器中，我将其更改为一个范围对象，

$scope.myArr = angular.fromJson(jsonStringAsAbove);

我的html代码，

<div class='row' data-ng-repeat='i in myArr'>
    <table class='col-xs-12' style='overflow:auto;border:1px solid black;' >
       <tr>
          <td style='width:100px;' data-ng-repeat='o in i'>
             <input type='checkbox' data-ng-model='o' />
          </td>
       </tr>
    </table>
</div>

但是，如果我select check box，myArr 没有正确更改。我怀疑我绑定到 input 元素的 data-ng-model 不正确。如何绑定 input 元素，以便根据 check box selected 将原始数组更新为 true 或 false？

Answer 1

让我们首先通过提供专有名称而不是 i 和 o 来重写代码：

<div class='row' data-ng-repeat='row in myArr'>
    <table class='col-xs-12' style='overflow:auto;border:1px solid black;' >
       <tr>
          <td style='width:100px;' data-ng-repeat='column in row'>
             <input type='checkbox' data-ng-model='column' />
          </td>
       </tr>
    </table>
</div>

这可能看起来毫无用处，但它使包括您在内的每个人都更容易阅读、理解和维护。

现在我们来看问题：

`data-ng-repeat='column in row'`

你不能像那样迭代 row。 row 是一个有 3 个字段的对象，不是数组。

迭代对象条目的正确方法是

`data-ng-repeat="(columnName, columnValue) in row`

现在您希望复选框绑定到具有当前列名称的 row 字段，因此输入应为

<input type='checkbox' data-ng-model='row[columnName]' />

但是请注意，复选框的模型应该是布尔值，而不是对象包含的字符串。该数组应定义为

[
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false},
    {'col 1': false, 'col 2': false, 'col 3': false}
]

正在工作的 plunkr：http://plnkr.co/edit/9PA1sG5FiicY9Xl2toe1?p=preview

使用嵌套的 ng-repeat 更新对象

update object using nested ng-repeat

angularjs

ng-repeat

angularjs-ng-repeat