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 expression绑定文本。此外，如果您的函数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>

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

Answer 3

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

你可以简单地使用ng-if。如果为false，则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>

Answer 4

今年五月的帮助

destinationViewController

Answer 5

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

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

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

scopeVar = scopeVar！= true undefined变为true。

Answer 6

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

AngularJS切换按钮

6 个答案: