javascript - 如何更改 AngularJS 中选中的多个复选框的类

Question

我有一些复选框列表，它们位于经典的ng-repeat中。我希望在单独检查复选框时更改标签类别。现在我有所有带有 checked 类的复选框。怎么了？

<fieldset class="g-checkbox_square_big box-inline-full_width-relative">
    <label class="box-full_width-grid-vertical_align_middle" ng-class="{checked: 'area_selected_' + area.id}">
        <div class="g-checkbox-dummy"></div>
        <img src="{{area.icon.icon.small.url === null ? '/public/images/image-placeholder.svg': area.icon.icon.small.url}}" class="shift-padding_2-horizontal" alt="Area Image">
        <span class="text-size_big-color_appblue">{{ area.title }}</span>
    </label>
    <input type="checkbox" ng-bind-model="'area_selected_' + area.id" data-id="{{area.id}}"/>
</fieldset>

仅供引用:输入覆盖了所有虚拟复选框空间。

Answer 1

无需更改 Controller

<fieldset class="g-checkbox_square_big box-inline-full_width-relative">
    <label class="box-full_width-grid-vertical_align_middle" ng-class="area.checked?'checked':''">
        <div class="g-checkbox-dummy"></div>
        <img src="{{area.icon.icon.small.url === null ? '/public/images/image-placeholder.svg': area.icon.icon.small.url}}" class="shift-padding_2-horizontal" alt="Area Image">
        <span class="text-size_big-color_appblue">{{ area.title }}</span>
    </label>
    <input type="checkbox" ng-bind-model="area.checked" data-id="{{area.id}}" />
</fieldset>