AngularJS toggle button

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>

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>

It might help you:

<html>

<head>
  <script src="js/angular.js"></script>
  <script src="js/app.js"></script>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>

<body ng-app>
  <div ng-controller="MyCtrl">
    <button ng-click="toggle()">Toggle</button>
    <p ng-show="visible">Hello World!</p>
  </div>
</body>

</html>

function MyCtrl($scope) {
  $scope.visible = true;
  $scope.toggle = function() {
    $scope.visible = !$scope.visible;
  };
}

This may Help:

<!-- Include Bootstrap-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>

<!-- Code -->
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Click here to <strong>Toggle (show/hide)</strong> description</a>

Tags:

Javascript

Angularjs

Recent Posts