更改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-類ng-class="{'unChecked' : !inventory.productName}"。

這就是說你真的需要角/ JavaScript的呢？在CSS，你可以這樣做：

.checkbox{ 
/// Styles when unchecked 
} 

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

Answer 4

使用此代碼

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

請參考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; 
}