Переключатель угловойJS

Я пытаюсь создать кнопку переключения в 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 к кнопке, когда она скрыта, что вызывает у меня проблемы с дизайном. В идеале я хочу иметь кнопку ONE, которая меняет текст, вызов класса и функции в зависимости от состояния patient.archived.

Какой чистый способ достичь этого?

Ответы

Ответ 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>

Ответ 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;
        };
    }

Ответ 3

для любого другого утомленного путешественника...

вы могли бы просто использовать ng-if. ng-if полностью исключает элемент из DOM, если false, поэтому у вас не возникнет проблем со стилями, если они не отображаются. Также нет необходимости в группе кнопок, которую вы могли бы просто изменить текст кнопки

Что-то вроде этого:

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

Ответ 4

Эта помощь может помочь

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

Ответ 5

Это самый простой ответ, который я нашел. Я не пробовал его с анимацией, потому что я просто использую его для быстрой настройки.

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

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

с scopeVar = scopeVar!= true undefined становится истинным.

Ответ 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">