conditionally apply ngClass in AngularJS

Question

any way to make an expression for ngClass to be a conditional. For example, I have tried the following using javascript:

 $scope.setEnabled = function(status){
    $scope.filterEnabled = status;
    if(status){
      angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn');
      angular.element(document.querySelector( '#enabledTrue')).addClass('active-btn');
    } else {
      angular.element(document.querySelector( '#enabledTrue')).removeClass('active-btn');
      angular.element(document.querySelector( '#enabledFalse')).addClass('active-btn');
    }  
  }

And view :

div class="buttons"> 
        <a id="enabledFalse" href="" ng-click="setEnabled(0)" class="click-btn active-btn">No</a> 
        <a id="enabledTrue" href="" ng-click="setEnabled(1)" class="click-btn">Yes</a> 
      </div>

What's the best way to apply this using ngClass?

Michael McKean · Accepted Answer · 2015-03-08 03:25:27Z

2

Here is what the conditional statement would look like:

<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="setEnabled(0)">No</a>
<a href class="click-btn" ng-class="{ 'active-btn' : !filterEnabled }" ng-click="setEnabled(1)">Yes</a>

And the js would simply be:

$scope.setEnabled = function(status){
  $scope.filterEnabled = status;
}

Edit: As an alternative, here's the most simplified method I can think of:

<a href class="click-btn" ng-class="{ 'active-btn' : filterEnabled }" ng-click="filterEnabled = !filterEnabled">{{ filterEnabled ? 'Yes' : 'No' }}</a>

You won't need anything in the js file; the Yes/No text and active-btn class will toggle when you click this single button, because they depend solely on the value of filterEnabled.
This is assuming only having one button is acceptable.

edited Mar 8, 2015 at 3:25

answered Mar 7, 2015 at 23:35

Michael McKean

212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danh · Accepted Answer · 2015-03-08 00:31:45Z

0

Outside of my SO-tag comfort zone, here, but you can use a ternary expression, where each tag is setup as the negation of the other:

... id="enabledFalse" ng-class="( filterEnabled)? 'active-btn' : ''"
... id="enabledTrue"  ng-class="(!filterEnabled)? 'active-btn' : ''"

Other classes to be applied unconditionally can be placed in a regular class attribute.

Also in each tag:

ng-click="filterEnabled=!filterEnabled"

if you want each to toggle, or call the function as you have it.

edited Mar 8, 2015 at 0:31

answered Mar 7, 2015 at 23:19

danh

62.7k10 gold badges100 silver badges139 bronze badges

5 Comments

Hassan Bendouj Over a year ago

But how I can change status using this ?

Hassan Bendouj Over a year ago

Status is depent link : ng-click="setEnabled(0)"

danh Over a year ago

Do you want clicking to toggle the value? See edit, The variable that you've put into scope is called filterEnabled. status is just a param name (local) in the setEnabled function.

Hassan Bendouj Over a year ago

but what about remove class : angular.element(document.querySelector( '#enabledFalse')).removeClass('active-btn'); angular.element(document.querySelector( '#enabledTrue')).addClass('active-btn');

danh Over a year ago

You don't add or remove. In angular its done declaratively. The ng-class expression gets evaluated and the class (or classes) that it evaluates to gets applied.

Collectives™ on Stack Overflow

conditionally apply ngClass in AngularJS

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related