Menu
I have a list of icons that are either "on" or "off" depending on boolean values in the $scope. I created two CSS classes -- clrOn and clrOff -- and they are only different colors. I am assigning all of the icons clrOff using class="" and then trying to override that with ng-class="" if the boolean is true.
Based on my research, this is what I have that should work. plunker
CSS FILE:
.clrOn { color: #333333; }
.clrOff { color: #DDDDDD; }
JS FILE:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.attachments = 1;
});
HTML:
<body ng-controller="MainCtrl">
<span class="clrOff"
tooltip="Attachments"
ng-class="{ 'clrOn' : app.attachments }">
TEST
</span>
</body>
717
First thing, ng-class="{ 'clrOn' : app.attachments }" is not picking up the attachments variable since it's declared directly on scope and not on scope.app so change that to ng-class="{ 'clrOn' : attachments }".
Second, ng-class will not override any existing class attributes, but add to them so your span will be left with having both classes applied to it. If you dont want to have both classes assigned you'll need to declare them both using ng-class.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
