单击单元格以选择/取消选中复选框

Question

我有这样的复选框：

如果我点击“等待第一次会议”字样，则会选中并取消选中该复选框。如果我单击单元格（例如，黑色部分，但不单击文本本身），则不会选中/取消选中该复选框。

HTML：

<table>
    <tr ng-repeat="option in item.options">
        <td>
            <input id="{{ item.id }}-{{ $index }}"
                   type="checkbox"/>
        </td>
        <td ng-style="{'backgroundColor':option.color}">
            <label for="{{ item.id }}-{{ $index }}" ng-style="{'backgroundColor': option.color}">{{ option.title }}</label>
        </td>
    </tr>
</table>

我尝试的一件事是使标签宽度等于单元格的100％，但如果文本为空白，则不起作用。有什么建议吗？

Answer 1

我认为您必须更改标记

<label ng-repeat="option in item.options" ng-style="{'backgroundColor':option.color}">
    <input type="checkbox" value="{{ option.title }}"/>{{ option.title }}
</label>

或者您添加了ng-checked和ng-click。

<tr ng-repeat="option in item.options">
    <td>
        <input ng-checked="item.checked" type="checkbox"/>
    </td>
    <td ng-style="{'backgroundColor':option.color}">
        <label ng-click="item.checked = !item.checked"  ng-style="{'backgroundColor': option.color}">
            {{ option.title }}
        </label>
    </td>
</tr>