Switch css to ng-click

Question

This is the main 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 css color : #d04f37 when the user clicks on the parent #preferencesBox . Adding / removing .active is a jQuery way. What should my ng-class or break code look like?

Answer 1

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

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

When check = true add class active

Answer 2

Take a look at the following 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 would say that it is simple enough for you to start and add logic to switch to click() (this is only if ).