it-swarm.com.de

AngularJS-Umschaltfläche

Ich versuche, eine Umschaltfläche in Angular zu erstellen. Was ich bisher habe, ist:

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

Grundsätzlich erreiche ich das Umschalten, indem ich ZWEI Knöpfe habe und zwischen ihnen umschalte. Dies führt zu Problemen, da der ng-hide der Schaltfläche nur einen display:none-Stil hinzufügt, wenn er ausgeblendet ist, was zu Problemen beim Styling führt. Idealerweise möchte ich eine Schaltfläche haben, deren Text, Klasse und Funktionsaufruf je nach dem Status von patient.archived geändert wurde.

Was ist ein sauberer Weg, um dies zu erreichen?

27

Sie sollten ng-class verwenden, um zwischen den Klassen zu wechseln und den Text mit einem regulären Angular-Ausdruck zu verknüpfen. Wenn Ihre Funktion toggleArchive nur den Wert umschaltet, können Sie ihn entfernen und den Wert aus einem Angular-Ausdruck umschalten:

<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>
50
Caio Cunha

Es könnte dir helfen.

<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;
        };
    }
1
Anil Singh

für jeden anderen müden Reisenden ...

sie hätten einfach ng-if verwenden können. ng-if schließt das Element vollständig aus dem DOM aus, wenn es falsch ist, sodass Sie keine Probleme mit Stilen haben, wenn sie nicht angezeigt werden. Es ist auch nicht wirklich eine Notwendigkeit für die Tastengruppe, dass Sie einfach den Text der Schaltfläche ändern können

Etwas wie das:

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

Dies ist die einfachste Antwort, die ich gefunden habe. Ich habe es nicht mit Animationen probiert, weil ich es nur für die schnelle Einrichtung benutze.

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

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

mit scopeVar = scopeVar! = true undefined wird wahr.

0
Damien Taylor
<input type="checkbox" class="toggle-button"
       ng-model="patient.archived">

Dann gestalten Sie das Kontrollkästchen wie eine Schaltfläche.

wenn der Toggle mehr tun muss, fügen Sie Ihrer Patientenklasse Folgendes hinzu:

class Patient {
    constructor() {
        this.archived = false;
    }
    ...
    get angularArchived() {
        return this.archived;
    }
    set angularArchived(value) {
        if (value !== this.archived)
            toggleArchived(value);
        }
        this.archived = value;
    }
}

dann benutze

<input type="checkbox" class="toggle-button"
       ng-model="patient.angularArchived">
0
Thomas Grainger

Dies kann helfen

<!-- 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>
0
Laxmi Salunkhe