29

我正在尝试在 Angular 中创建一个切换按钮。到目前为止，我所拥有的是：

<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>

基本上我通过有两个按钮并在它们之间切换来实现切换。这会导致问题，因为它ng-hide只是在隐藏时向按钮添加display:none样式，这导致了我的样式问题。理想情况下，我想要一个按钮，它的文本、类和函数调用根据patient.archived.

什么是实现这一目标的干净方法？

4

6 回答 6

56

您应该使用ng-class在类之间切换并将文本与常规Angular 表达式绑定。此外，如果您的函数toggleArchive仅切换值，则可以将其删除并从 Angular 表达式中切换值：

<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>
于 2013-04-27T12:31:27.170 回答
2

对于任何其他疲惫的旅行者......

你可以简单地使用ng-if. ng-if如果为 false，则完全从 DOM 中排除该元素，因此在不显示样式时不会出现样式问题。此外，实际上不需要按钮组，您只需更改按钮的文本

像这样的东西：

<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>
于 2015-04-08T05:20:54.440 回答
2

它可能会帮助您：

<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;
  };
}
于 2014-09-15T04:23:01.773 回答
1

这是我找到的最简单的答案。我没有尝试过动画，因为我只是用它来快速设置。

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

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

与scopeVar=scopeVar!=true未定义成为真。

于 2016-02-27T14:16:37.717 回答
1

这可能会有所帮助：

<!-- 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>
于 2015-08-17T12:02:02.353 回答
1 
<input type="checkbox" class="toggle-button"
       ng-model="patient.archived">

然后将复选框设置为按钮。

如果切换需要做更多事情，请将以下内容添加到您的患者类中：

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

然后使用

<input type="checkbox" class="toggle-button"
       ng-model="patient.angularArchived">
于 2016-07-11T11:16:26.560 回答