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在隐藏按钮时才会为按钮添加样式,这会导致样式问题.理想情况下,我想要一个按钮,它的文本,类和函数调用根据状态而改变patient.archived.

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

Answer 1

您应该使用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>