在复选框值更改时更改 div 的类答案

【问题标题】：Changing class of a div on a checkbox value change在复选框值更改时更改 div 的类
【发布时间】：2014-06-10 15:43:37
【问题描述】：

每当检查复选框时，我都在尝试将添加类“签名”更改为父级。为此，我正在尝试使用 ngClass 指令。

HTML

   <div ng-class="{isChecked: (isChecked_1 == 'true')}">
     <input type="checkbox" id="check_1" ng-model="isChecked_1" />
     <label class="label_1" for="check_1">This is a label</label>
   </div>

CSS

.isChecked{
    background-color: #428bca;
    color: white;
}

但这不起作用。有人可以指出我的错误或建议一些更好的方法。

【问题讨论】：

标签： html css angularjs

【解决方案1】：

当用户选中复选框时，angularJS 将模型设置为布尔值true。在您的代码中，您将其与计算结果为false 的字符串'true' 进行比较。因此，您必须将其与布尔值true 进行比较。这与 if 语句不同，其中字符串 'true' 的计算结果为 true。

此外，您根本不需要手动比较，因为它的唯一目的是产生一个布尔值。您可以将代码更改为：

    <div ng-class="{isChecked: isChecked_1}">
      <input type="checkbox" id="check_1" ng-model="isChecked_1"/>
      <label class="label_1" for="check_1">This is a label</label>
    </div>

【讨论】：

【解决方案2】：

解决了。

通过将 'true' 更改为 true ，它起作用了。

所以新代码是：

   <div ng-class="{isChecked: (isChecked_1 == true)}">
     <input type="checkbox" id="check_1" ng-model="isChecked_1" />
     <label class="label_1" for="check_1">This is a label</label>
   </div>

有人知道variable == 'true' 和variable == true 之间的区别是什么吗？

【讨论】：

【解决方案3】：

您可以使用 jquery。它具有根据特定条件添加和删除 css 类的方法

【讨论】：

这不是做事的方式。混合代码是地狱之门。 Spaghetti code