javascript - AngularJS 切换按钮

Question

我正在尝试在 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 样式，这导致了样式问题。理想情况下，我想要一个按钮，它的文本、类和函数调用根据 patent.archived 的状态进行更改。

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

Answer 1

您应该使用ng-class在类之间切换并使用常规 Angular expression 绑定(bind)文本。另外，如果您的函数 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>