AngularJS toggle button

Question

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?

Answer 1

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> 

Answer 2

for any other weary traveller...

you could simply have used ng-if. ng-if completely excludes the element from the DOM if false, so you'd have no issues with styles when not displayed. Also there is not really a need for the button group you could just change the text of the button

Something like this:

<button class="btn btn-primary pull-right"         ng-click="toggleArchive(true)"         ng-if="!patient.archived">Archive patient</button> <button class="btn btn-danger pull-right"         ng-click="toggleArchive(false)"         ng-if="patient.archived">Unarchive patient</button>