Pulsante di commutazione AngularJS

Sto provando a creare un pulsante di commutazione in Angolare. Quello che ho finora è:Pulsante di commutazione AngularJS

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

Fondamentalmente io ottenere la commutazione, avendo due pulsanti, e commutazione tra di loro. Ciò sta causando problemi perché lo ng-hide aggiunge semplicemente uno stile display:none al pulsante quando è nascosto, il che mi causa problemi di stile. Idealmente voglio avere un pulsante, che ha il testo, la classe e la chiamata di funzione cambiata a seconda dello stato di patient.archived.

Qual è un modo pulito per raggiungere questo obiettivo?

fonte

2013-04-27 Dominic Bou-Samra

Forse questo aiuta: http://stackoverflow.com/a/ 12008581/983992 –

http://www.angulartutorial.net/2017/03/how-to-build-toggle-button-or.html – Prashobh

È necessario utilizzare ng-class per alternare tra le classi e associare il testo a un normale Angular expression. Inoltre, se la funzione toggleArchive passare solo il valore, è possibile rimuoverlo e commutare il valore da un'espressione angolare:

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

fonte

2013-04-27 12:31:27

Ho considerato questo, e mi rendo conto che si può fare, ma sembra che il loro sia un un po 'troppo nella visione che potrebbe essere spinta su una direttiva. Pensieri? –

La direttiva è un buon modo per incapsulare i widget riutilizzabili. Quindi, se si tratta di un widget comune, o se ritieni che questo possa colpire in qualche modo le prestazioni, forse varrebbe una direttiva. Dai un'occhiata qui, dove condivido le mie opinioni su [quando scrivere una direttiva] (http://stackoverflow.com/questions/15898991/when-to-write-a-directive/16121344#16121344). –

La tua logica è indietro.In realtà è classe: condizione, non condizione: classe –

potrebbe aiutarti.

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

fonte

2014-09-15 04:23:01

per qualsiasi altro viaggiatore stanco ...

si potrebbe semplicemente aver usato ng-if. ng-if esclude completamente l'elemento dal DOM se falso, quindi non avresti problemi con gli stili quando non sono visualizzati. Inoltre non c'è davvero una necessità per il gruppo di pulsanti si può solo modificare il testo del pulsante

Qualcosa di simile a questo:

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

fonte

2015-04-08 05:20:54 wired00

Questo può aiutare

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

fonte

2015-08-17 12:02:02

Questa è la risposta più semplice Ho trovato. Non l'ho provato con le animazioni perché lo uso solo per l'installazione rapida.

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

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

con scopeVar = scopeVar! = True indefinito diventa vera.

fonte

2016-02-27 14:16:37

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

Quindi impostare la casella di controllo come un pulsante.

se l'interruttore ha bisogno di fare più cose, aggiungere il seguente alla classe paziente:

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

quindi utilizzare

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

fonte

2016-07-11 11:16:26

Pulsante di commutazione AngularJS

risposta

Problemi correlati