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

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

• javascript
• angularjs
• angularjs-ng-click
• ng-class

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

3 Answers 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

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.

You can acplish 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/api/ng/directive/ngDisabled