Toggle Class b/w Two Buttons Using Angular

Question

Hello I would like to apply the bootstrap styling of the btn-success class upon click and change the class of the other button to btn-warning.

However when I run it the bootstrap styling does not change anything.

Any help would be great. Thanks!

http://plnkr.co/edit/9xV6hRA929sFRDCDBEpy

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <script data-require="[email protected]" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js" data-semver="2.0.0"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="app.js"></script>
    <style type="text/css"></style>
  </head>
  <body ng-controller="MainCtrl">
    <br />
    <br />
    <div class="true col-xs-4">
      <button type="button" class="btn btn-lg btn-block" ng-class="{true: 'btn-success', false: 'btn-warning'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">True</button>
    </div>
    <div class="false col-xs-4">
      <button type="button" class="btn btn-lg btn-block" ng-class="{true: 'btn-warning', false: 'yupNope'}[!yupNope.isSelected]" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">False</button>
    </div>
  </body>

</html>

TheSharpieOne · Accepted Answer · 2016-12-27 20:13:49Z

1

You have the ng-class object backwards. It should be {'class-name': boolean} Also you need to have the boolean value varaiblized so that it can be changed and it not just a hard-coded true/false

Change the first button to

<button type="button" class="btn btn-lg btn-block" ng-class="{'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}" ng-click="!yupNope.isSelected ? (yupNope.isSelected = !yupNope.isSelected) : ''">True</button>

The difference is in ng-class:

ng-class="{'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}"

Also, your ng-click for both buttons are the same, which would only do something if yupNope.isSelected is falsy.

answered Dec 27, 2016 at 20:13

TheSharpieOne

25.7k9 gold badges72 silver badges80 bronze badges

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

6 Comments

RyeGuy Over a year ago

I appreciate the input. However I have edited my plnkr to reflect your changes and it still does not work

TheSharpieOne Over a year ago

Are you sure you edited it to reflect the changes? {'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}[yupNope.isSelected] != {'btn-success': yupNope.isSelected, 'btn-warning': !yupNope.isSelected}

TheSharpieOne Over a year ago

Also, your plunker is broke. It has errors in the console. Try this one: plnkr.co/edit/45HCJQhUAHw2F1IuXqFT?p=preview (The script is script.js, not app.js)

RyeGuy Over a year ago

Perhaps I am not implementing your changes appropriately. I have edited my plunkr to reflect them. No more console errors but not the desired functionality. Again thank you for the help.

TheSharpieOne Over a year ago

@RyeGuy You are correct, you are not implementing the changes appropriately. Look very hard at your ng-class vs what I am suggesting. You will see [yupNope.isSelected] in your code, now DELETE it. Also, there are more errors in your code because you have changed more things. "testViewer" !== "plunker" (The name of your module does not match the value of ng-app anymore, they should match)

|

Collectives™ on Stack Overflow

Toggle Class b/w Two Buttons Using Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related