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'}
]

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

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

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

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更新对象

1 个答案: