Angularjs 在选中或取消选中时更改复选框的颜色？

我有一个输入字段类型复选框，我想在选中和取消选中时更改颜色，我尝试了这样的方法，但不适用于我

以下是我的html代码：

<input type="checkbox" ng-class = "unChecked =!checked" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name
                <br/>

产品名称

---

请告诉我怎么做？

试试这个。复选框ng value true的默认值为“true”，ng false value的默认值为“false”

  ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}"

var-app=angular.module（“testApp”，[]）；
app.controller（'testCtrl'，函数（$scope）{
$scope.inventory={productName:false}；
})

。已选中{
背景色：红色；
}
.未经检查{
背景颜色：绿色；
}

品名

试试这个。 您必须添加条件类。 这是工作票

产品名称

将ng类更改为

ng类=“{'unChecked'：！inventory.productName}”

也就是说，您真的需要angular/javascript吗？在css中，您可以执行以下操作：

.checkbox{
/// Styles when unchecked
}

.checkbox:checked{
//// Styles when checked
}

使用此代码

<input type="checkbox" ng-class = "{'class1':inventory.productName == 'PRODUCT NAME', 'class2':inventory.productName != 'PRODUCT NAME'}" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" />Product Name

产品名称

请参阅

请查找以下代码：

HTML:

<div ng-app="app" ng-controller="test">
  <label ng-class="{'red': inventory.productName == 'false', 'green': inventory.productName == 'true'}">
    <input type="checkbox" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" ng-init="inventory.productName = 'true'"
    />Product Name
  </label>
  <br/>
</div>

var app = angular.module('app', []);

app.controller('test', function($scope) {

});

.red {
  color: red;
}

.green {
  color: green;
}

CSS:

<div ng-app="app" ng-controller="test">
  <label ng-class="{'red': inventory.productName == 'false', 'green': inventory.productName == 'true'}">
    <input type="checkbox" class="checkbox" ng-model="inventory.productName" ng-checked='true' ng-true-value="true" ng-false-value="false" ng-click="inventory.addRemoveColumn(inventory.productName,'productInfo.productName', 'PRODUCT NAME')" ng-init="inventory.productName = 'true'"
    />Product Name
  </label>
  <br/>
</div>

var app = angular.module('app', []);

app.controller('test', function($scope) {

});

.red {
  color: red;
}

.green {
  color: green;
}

---

单击后，它将只添加未选中项，之后不会更改。另外，如果您可以将此标记为已回答，这将对我和其他用户有所帮助，因此我必须更改复选框背景色，是否有可能您可以将CSS中的

color

属性替换为

background color

我尝试了这两种背景色，背景属性，它不需要感谢响应，但我希望复选框背景颜色的变化必须发生参见此答案