Toggle class between two buttons in Angular but restrict to prevent same button from changing class

Question

Trying to create some very basic functionality which basically makes two buttons behave like radio buttons. Have two buttons that are used to show/hide different content based on what is shown. So it is working as expected except for it is changing on any click. So if I click the same button twice then it changes the class. I only need it to change if the other button is clicked:

<button class="someClass" ng-class="{true: 'green', false: 'blue'}        [!yupNope.isSelected]" ng-click="yupNope.isSelected = !yupNope.isSelected">YES</button>
   <button class="someClass" ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]" ng-click="yupNope.isSelected = !yupNope.isSelected">NO</button>

So if Yes is clicked then it should update and No should too. But if Yes is clicked again before No is clicked then there should be no change.

Here is a Plunkr to play with:

Plunkr Demo

simple assing static value like true or false instead yupNope.isSelected = !yupNope.isSelected — Grundy
– Grundy, Commented Apr 27, 2015 at 18:10

dfsq · Accepted Answer · 2015-04-27 18:14:32Z

3

Instead of yupNope.isSelected = !yupNope.isSelected as ngClick expression set yupNope.isSelected to true/false respectively:

<button ng-click="yupNope.isSelected = false" class="someClass" ng-class="{true: 'green', false: 'blue'}[!yupNope.isSelected]">YES</button>
<button ng-click="yupNope.isSelected = true" class="someClass" ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]">NO</button>

Demo: http://plnkr.co/edit/HJfmYf6d9dnNqZLwYLFF?p=preview

edited Apr 27, 2015 at 18:14

answered Apr 27, 2015 at 18:12

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Grundy Over a year ago

i'm so slow write answer :-)

dfsq Over a year ago

@Grundy Sorry, next time you will beat me ;)

Grundy Over a year ago

I'll be faster next time :-D

yozh · Accepted Answer · 2015-04-27 18:10:01Z

2

Add a condition to ng-click expression:

<button class="someClass" ng-class="{true: 'green', false: 'blue'}[!yupNope.isSelected]" 
  ng-click="yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">YES</button>
 <button class="someClass" ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]" 
  ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">NO</button>

Your modified plunkr.

answered Apr 27, 2015 at 18:10

yozh

1,2232 gold badges10 silver badges18 bronze badges

1 Comment

yozh Over a year ago

Admittedly dfsq's answer's better :)

wilgoolsby · Accepted Answer · 2015-04-27 18:16:32Z

0

You can accomplish this by using ng-disabled. On each button you can apply the ng-disabled attribute.

<button class="someClass"
    ng-class="{true: 'green', false: 'blue'}[!yupNope.isSelected]" 
    ng-click="yupNope.isSelected = !yupNope.isSelected"
    ng-disabled="yupNope">YES</button>

<button class="someClass"
    ng-class="{false: 'green', true: 'yupNope'}[!yupNope.isSelected]"
    ng-click="yupNope.isSelected = !yupNope.isSelected"
    ng-disabled="!yupNope">NO</button>

You can find the docs here: https://docs.angularjs.org/api/ng/directive/ngDisabled

answered Apr 27, 2015 at 18:16

wilgoolsby

12 bronze badges

Collectives™ on Stack Overflow

Toggle class between two buttons in Angular but restrict to prevent same button from changing class

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related