1

I have a bootstrap button group in my Ember 2.2 app that looks like this:

 <div class='btn-group' role='group' aria-label='...'>
     <button type="button" class="btn btn-primary btn-xsm active={{aIsActive}}" >A</button>
     <button type="button" class="btn btn-primary btn-xsm active={{bIsActive}}" >B</button>
     <button type="button" class="btn btn-primary btn-xsm active={{cIsActive}}" >C</button>
</div>

'aIsActive', 'bIsActive', and 'cIsActive' are defined in the associated controller, and only one will be 'true' at a given time. The syntax shown above doesn't work. What's the proper way of doing this?

ptmoy2
  • 311
  • 1
  • 4
  • 13

1 Answers1

3

Here you go: if-helper

<button class="btn {{if aIsActive 'active'}}" >A</button>

btw, if you are creating navigation you should do it with link-to helper. It will add active class automatically when route is active.

Keo
  • 1,143
  • 8
  • 19