AngularJS切换按钮 [英] AngularJS toggle button

问题描述

我正在尝试在Angular中创建一个切换按钮.到目前为止，我有:

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

<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的状态而有所不同.

Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.

有什么干净的方法可以做到这一点?

What's a clean way to achieve this?

推荐答案

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

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>

这篇关于AngularJS切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！