CheckBoxの色を変更するか、チェックを外しますか？

Question

私は入力フィールドタイプのチェックボックスを持っていますが、チェック時に色を変更したいのですが、これを試しましたが、私はng-class = "unChecked =!checked"を試しましたが、私のために働いていません。ここで

は私の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/> 

私はこれを行うことができる方法を教えてください？

Answer 1

これを試してください。 ng-value-trueのチェックボックスのデフォルト値は 'true'、ng-false-valueは 'false'です。

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

var app = angular.module("testApp", []); 
 
app.controller('testCtrl', function($scope){ 
 
    $scope.inventory = {productName:false}; 
 
})

.checked{ 
 
    background-color:red; 
 
    } 
 

 
.unchecked{ 
 
    background-color:green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="testApp" ng-controller="testCtrl"> 
 
    
 
    <div ng-class = "{'checked': inventory.productName, 'unchecked' : !inventory.productName}"> 
 
    <input type="checkbox" class="checkbox" ng-model="inventory.productName" />Product Name 
 
       </div> 
 
</div>

Answer 2

これを試してみてください。 条件付きクラスを追加する必要があります。 はここで働いてfiddle

<input type="checkbox" ng-model="inventory.productName" ng-true-value="true" ng-false-value="false" /><span ng-class = "{'checked': inventory.productName=='true', 'unChecked' : inventory.productName=='false'}">Product Name</span> 
      <br/> 

Answer 3

変更ng-class="{'unChecked' : !inventory.productName}"にNG-クラスです。

あなたは本当にこのために角度/ javascriptが必要ですか？ CSSであなたがこれを行うことができます：このコード

<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 

Answer 4

使用をdemoを参照してください。

見つけてください以下のコード：

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> 

JS：

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

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

}); 

CSS：

.red { 
    color: red; 
} 

.green { 
    color: green; 
} 

Answer 5

.checkbox{ 
/// Styles when unchecked 
} 

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