css - Toggle css on ng-click

Question

This is the basic idea of my code:

HTML (jade):

#preferencesBox(ng-click="toggleCustom()")
   .glyphicon.glyphicon-heart

CSS:

#preferencesBox.active{
   color: #d04f37;
}

Angular:

$scope.check = true;
$scope.toggleCustom = function() {
    $scope.check = $scope.check === false ? true: false;
};

I want to add the css color : #d04f37 when the user clicks the parent #preferencesBox. Adding/removing .active is the jQuery way. How should my ng-class or the rest code look like?

Answer 1

You can use an expression inside ng-class that will watch the check variable:

ng-class="{'active' : check}"

When check = true, add class active

Answer 2

Take a look at the next example and apply in Jade:

<header ng-click="click()" ng-class="{'active': active == true}">Hello</header>

Then, in your controller:

$scope.click = function(){
    $scope.active = true;
}

I'd say this is simple enough to get you started and add logic for toggling into click() (it's only an if).