Having ng-class in angularjs replace instead of append to CSS classes?

Question

I am doing an SPA to test out my AngularJS knowledge. In this app, I have a template where-by users can choose buttons to show how many days of weather forecast they want.

I am using Twitter Bootstrap classes with the AngularJS ngClass to dynamically have the Twitter Bootstrap CSS classes bound to the button elements depending on which button is selected.

What I wish to happen is, with using ng-class in the HTML of the template, if the button is chosen, it will then change the Bootstrap CSS class of that button to btn btn-disabled from btn btn-primary, so it cannot be selected, as it all ready is selected. I did this in the HTML for this template as so —

  <div class="btn-group" role="group">
    <a href="#/forecast/1" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '1' }">1 Day Forecast</a><a href="#/forecast/2" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '2' }">2 Day Forecast</a><a href="#/forecast/3" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '3' }">3 Day Forecast</a>
  </div>
  <div class="btn-group" role="group">
    <a href="#/forecast/5" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '5' }">5 Day Forecast</a><a href="#/forecast/7" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '7' }">7 Day Forecast</a><a href="#/forecast/10" class="btn btn-primary" ng-class="{  'btn btn-disabled' : days === '10' }">10 Day Forecast</a>
  </div>

However, when I run this, instead of replacing the Bootstrap CSS class for the element btn btn-primary and change it to btn btn-disabled, as desired; instead, it appends onto the element, so it becomes btn btn-primary btn-disabled all as one, and btn-primary overrules everything visually, so it winds up looking like this in the output —

<a href="#/forecast/1" class="btn btn-primary btn-disabled" ng-class="{  'btn btn-disabled' : days === '1' }">1 Day Forecast</a>

Naturally, this is not the desired effect I want here. Would someone please tell me how, in AngularJS ngClass, do i have it replace the Bootstrap CSS class, not just append it?

Please provide a plunkr or fiddle.

Shashank Agrawal
– Shashank Agrawal

2015-11-22 08:49:04 +00:00
Commented Nov 22, 2015 at 8:49 — Shashank Agrawal
– Shashank Agrawal, Commented Nov 22, 2015 at 8:49

Tristan · Accepted Answer · 2015-11-22 07:52:54Z

2

You are correct, using ng-class will add the classes when evaluated as true. So the solution is to add both options to ng-class so that either btn-primary or btn-disabled is added at any time.

<a href="#/forecast/1" class="btn" 
    ng-class="{'btn-disabled': days === '1', 'btn-primary': days !== '1'}">1 Day Forecast</a>

You also don't need to add the class btn to the ng-class since you want it to be used regardless of the value of days.

edited Nov 22, 2015 at 7:52

answered Nov 22, 2015 at 6:52

Tristan

3,3218 gold badges25 silver badges27 bronze badges

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

5 Comments

faddah Over a year ago

thank you for the answer. @Tristan. however, if i try the code your way, above, it still includes both CSS classes, btn-diabled and btn-primary, just now in reverse order. here is the HTML output from my dev tools in the browser —

<a href="#/forecast/3" class="btn btn-disabled btn-primary" ng-class="{'btn-disabled': days === '3', 'btn-primary': days !== 3}">3 Day Forecast</a>

... see? it still does that, even coding it the way you suggest above. and because btn-primary is still in there, it takes precedence over everything. any other suggestions?

Tristan Over a year ago

Try comparison to string. i.e. days !== '3'

Marin Takanov Over a year ago

Isn't days an int variable? @faddah, can you show us how $scope.days looks like? If you don't know the type of $scope.days, try == instead of ===

Tristan Over a year ago

Considering @faddah's existing code was evaluating true (it was adding btn-disabled), days must be a string. The data type will just depend on how it's set: $scope.days = '1'; str, $scope.days = 1; int

faddah Over a year ago

that was it! @Tristan, you were so correct, i forgot to enclose the var in the second conditional in a '' for a string. i did that with all of them, it's now all working now, perfectly! thank you, @Tristan, thank you @Marin Takanov! you folks & stackoverflow are my new best friends!! 😉

Collectives™ on Stack Overflow

Having ng-class in angularjs replace instead of append to CSS classes?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related