Question

46

AngularJS toggle button

rated 0 times [ 52] [ 6] / answers: 1 / hits: 74707 / 11 Years ago, sat, april 27, 2013, 12:00:00

I am trying to create a toggle button in Angular. What I have so far is:

<div class="btn-group">

  <a class="btn btn-primary pull-right"

     ng-click="toggleArchive(true)"

     ng-show="!patient.archived">Archive patient</a>

  <a class="btn btn-danger pull-right"

     ng-click="toggleArchive(false)"

     ng-show="patient.archived">Unarchive patient</a>

  .... some other buttons ....

</div>

Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.

What's a clean way to achieve this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isham

Add To Favorites

Follow

Total Points: 69

Total Questions: 86

Total Answers: 86

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

isham questions

1 NodeJS - TypeError: Busboy is not a constructor

Wed, Jan 19, 22, 00:00, 2 Years ago

1 How to pass query parameters to next.js api handler when calling from inside of getStaticProps

Wed, Dec 2, 20, 00:00, 4 Years ago

1 How to display the values from ajax success data to the html table?

Tue, Feb 25, 20, 00:00, 4 Years ago

1 How to set expanded prop for material ui TreeView component conditionally

Tue, Feb 4, 20, 00:00, 4 Years ago

1 Getting Firebase doc.data is undefined

Sun, Dec 1, 19, 00:00, 5 Years ago

View All

answered 11 Years ago bradley · Accepted Answer

You should use ng-class to toggle between classes and bind the text with a regular Angular expression. Also, if your function toggleArchive only toggle the value, you can remove it and toggle the value from an Angular expression:

<a class=btn pull-right 

   ng-class={true: 'btn-primary', false: 'btn-danger'}[!patient.archived]

   ng-click=patient.archived = !patient.archived>

  {{!patient.archived && 'Archive' || 'Unarchive'}} patient

</a>