发表新帖
发表新帖

AngularJS toggle button

前端 未结
关注
6 1217
不知归路
不知归路 2021-02-01 03:41

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


  

        

                      

              相关标签:
6条回答
  • 失恋的感觉
    2021-02-01 04:02

    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>
    0 讨论(0)
  • 深忆病人
    2021-02-01 04:03

    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>
    0 讨论(0)
  • 梦如初夏
    2021-02-01 04:17

    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>
    0 讨论(0)
  • 無奈伤痛
    2021-02-01 04:20 
    <input type="checkbox" class="toggle-button"
       ng-model="patient.archived">

    Then style the checkbox like a button.

    if the toggle needs to do more things, add the following to your patient class:

    class Patient {
  constructor() {
    this.archived = false;
  }
  ...
  get angularArchived() {
    return this.archived;
  }
  set angularArchived(value) {
    if (value !== this.archived) {
      toggleArchived(value);
    }
    this.archived = value;
  }
}

    then use

    <input type="checkbox" class="toggle-button"
       ng-model="patient.angularArchived">
    0 讨论(0)
  • 梦毁少年i
    2021-02-01 04:21

    This is the simplest answer I've found. I haven't tried it with animations because I just use it for quick setup.

    <a ng-click="scopeVar=scopeVar!=true">toggle</a>

<div ng-show="scopeVar">show stuff</div>

    with scopeVar=scopeVar!=true undefined becomes true.

    0 讨论(0)
  • 北恋
    2021-02-01 04:22

    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;
  };
}
    0 讨论(0)
 看不清?
提交回复
热议问题