AngularJS 切换按钮

Question

AngularJS 切换按钮

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的状态而变化。

有什么简洁的方法可以实现这一点吗？

- Dominic Bou-Samra

2

也许这可以帮助你：https://dev59.com/lWct5IYBdhLWcg3wjuAj#12008581 - Marcel Gwerder

6个回答

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

- Anil Singh

2

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

你可以简单地使用ng-if。如果条件不成立，ng-if会完全从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>

- wired00

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>

- Laxmi Salunkhe

1

这是我找到的最简单的答案。因为我只用它进行快速设置，所以我还没有尝试使用它进行动画。

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

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

在 scopeVar=scopeVar!=true 的情况下，未定义的变量会变为true。

- Damien Taylor

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

- Thomas Grainger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Caio Cunha · Accepted Answer

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