I have a set of icons that can be either "active" or "inactive" based on boolean values in the $scope. To visually differentiate between them, I've created two CSS classes called activeIcon and inactiveIcon that simply change the color. Currently, all icons are assigned the inactiveIcon class using class="", and I am attempting to dynamically switch to the activeIcon class using ng-class="" if the boolean condition is met.
After conducting some research, I believe this approach should work as intended. Here is a link to a demonstration.
CSS FILE:
.activeIcon { color: #333333; }
.inactiveIcon { color: #DDDDDD; }
JS FILE:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.attachments = 1;
});
HTML:
<body ng-controller="MainCtrl">
<span class="inactiveIcon"
tooltip="Attachments"
ng-class="{ 'activeIcon' : app.attachments }">
TEST
</span>
</body>