Change CSS class's property on click

Question

I've read around a little bit and have a good start to what I ultimately want. This was helpful, along with another article which I forgot the link to. However, everything I've read ADDS a CSS class or property to an element. I want to CHANGE a property of an existing CSS class, but I don't know how to target it.

I think I want to use ng-class in one of these use cases taken from the Angular documentation:

1. If the expression evaluates to a string, the string should be one or more space-delimited class names.
2. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

My existing code uses ng-class along with some controller logic.

HTML

<div ng-controller="ngToggle">
    <div ng-class="{'inset-gray-border' : style}">
        <div class="subcontainer" ng-click="toggleStyle()">{{item.name}}</div>
    </div>
</div>

This currently adds the inset-gray-border class to the nested div, but I just want to change the border property in the subcontainer class.

Controller

angular.module('app').controller('ngToggle', ['$scope', function($scope) {
    $scope.style = false;
    $scope.toggleStyle = function() {
        $scope.style = $scope.style === false ? true: false;
    };
}]);

I considered using a directive, but I believe that would be overkill. I think this can be achieved in a controller.

EDIT: After further research I think jQLite can do the trick, but that would probably require a directive.

Answer 1

CHANGE a property of an existing CSS class

Add a css rule that does that using the new class you added using ng-class. The specificity will over ride the original rule

.subcontainer{ 
    color : blue
}
.inset-gray-border .subcontainer{
     color:red
}

Answer 2

Instead of a big toggleStyle function, you can write that stuff in UI side only. Here is fiddle. As you want to change border property of .subcontainer, Overwrite that property by adding .insert-gray-border

<div ng-controller="ngToggle">
    <div >
        <div ng-class="{'subcontainer':true,'inset-gray-border' : style}" ng-click="style=!style">{{item.name}}</div>
    </div>
</div>

The benifit of this is , it uses local scope instead of controller scope.

Answer 3

The best bet would be to have two CSS classes defined, one for the base (untoggled) case, another with all the properties that you want for when the property is toggled on.

In this case you may want something like:

.container .subcontainer {}
.container .subcontainer-bordered { border: solid 1px #123456}

Then your HTML code be updated to reflect this structure

<div ng-controller="ngToggle">
    <div class="container">
        <div class="subcontainer" ng-class="{'subcontainer-bordered': style}" ng-click="style = !style">{{item.name}}</div>
    </div>
</div>