1

I have a input field type checkbox and I want to change the color on check and uncheck, I tried ng-class = "unChecked =!checked" like this, but not working for me.

Here is my html code:

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

Please tell me how can I do this?

Anita Mehta
  • 625
  • 2
  • 13
  • 30

5 Answers5

1

try this. checkbox default value for ng-value-true is 'true' and ng-false-value is '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>
Hadi J
  • 16,989
  • 4
  • 36
  • 62
  • Thanks for response, but I wanted checkbox background color changes has to be happen – Anita Mehta Apr 26 '16 at 15:00
  • see this answer http://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div – Hadi J Apr 26 '16 at 15:37
0

try this. you have to add conditional class. Here is the working 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/>
Devidas Kadam
  • 944
  • 9
  • 19
0

change the ng-class to ng-class="{'unChecked' : !inventory.productName}".

That being said do you really need angular/javascript for this? in css you could do this:

.checkbox{
/// Styles when unchecked
}

.checkbox:checked{
//// Styles when checked
}
Ahmed Wagdi
  • 934
  • 5
  • 9
0

Use this code 

<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
byteC0de
  • 5,153
  • 5
  • 33
  • 66
0

Refer the demo.

Please find the code below:

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;
}
Shashank
  • 2,010
  • 2
  • 18
  • 38