如何在AngularJS中选中多个复选框更改类答案

【问题标题】：How to change class on checked multiple checkboxes in AngularJS如何在AngularJS中选中多个复选框更改类
【发布时间】：2017-01-20 19:17:50
【问题描述】：

我有一些复选框列表，它们是经典的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>

仅供参考：输入覆盖了所有虚拟复选框空间。

【问题讨论】：

请详细说明更改标签类别以单独检查我的复选框。?
点击输入 - 改变它的状态 = 改变兄弟标签的类别
创建新函数以更改您的 area 对象的状态并在您的复选框的 ng-change 上调用该函数
没有控制器集成就没有办法操作它吗？
检查我的答案

标签： javascript angularjs class checkbox

【解决方案1】：

无需更改控制器

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

【讨论】：

【解决方案2】：

试试这个

<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}}"/>

【讨论】：

【解决方案3】：

根据需要，这是一个无需与控制器交互的答案。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
.checked
{
background: blue;
}
</style>
<body>

<div ng-app="" ng-init="areas=['1','2','3']">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="area in areas">
      <label ng-class="{checked: show}">{{'area'+area}}
    </label>
    <input type="checkbox" ng-bind-model="'area' + area" ng-click="show = !show"/>
</fieldset>
      {{ x }}
    </li>
  </ul>
</div>

</body>
</html>

请运行上面的sn-p

HEre is a working DEMO

【讨论】：