si cela ne vous dérange pas de changer votre HTML, vous pouvez utiliser l'attribut data-toggle sur <button> S. Voir la single toggle section de the button examples :

<button type="button" class="btn btn-primary" data-toggle="button">
    Single toggle
</button>

Bootstrap 3 a des options pour créer des boutons à bascule basés sur des cases à cocher ou des boutons radio: http://getbootstrap.com/javascript/#buttons

cases à cocher

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Option 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 3
  </label>
</div>

boutons Radio

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

pour que cela fonctionne, vous devez initialiser .btn s avec le Javascript de Bootstrap:

$('.btn').button();

j'ai essayé d'activer la classe 'active' manuellement avec javascript. Il n'est pas utilisable comme une bibliothèque complète, mais pour les cas faciles semble être suffisant:

var button = $('#myToggleButton');
button.on('click', function () {
  $(this).toggleClass('active');
});

si vous réfléchissez bien, la classe 'active' est utilisée par bootstrap lorsque le bouton est pressé, pas avant ou après (notre cas), donc il n'y a aucun conflit dans la réutilisation de la même classe.

essayez cet exemple et dites-moi s'il échoue: http://jsbin.com/oYoSALI/1/edit?html,js, sortie

Si vous voulez garder une petite base de code, et vous allez en avoir besoin le bouton à bascule pour une petite partie de la demande. Je suggérerais plutôt de maintenir que vous êtes le code javascript votre auto (angularjs, javascript, jquery) et d'utiliser simplement CSS.

bon générateur de bouton à bascule: https://proto.io/freebies/onoff /

vous pouvez utiliser la bibliothèque de commutateurs à bascule CSS. Il suffit d'inclure la CSS et le programme js vous-même: http://ghinda.net/css-toggle-switch/bootstrap.html

vous pouvez utiliser le commutateur de conception de matériaux pour Bootstrap 3.3.0

http://bootsnipp.com/snippets/featured/material-design-switch

ici ce très utile pour Bootstrap Bouton À Bascule . Exemple dans le code snippet!! et jsfiddle en bas.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <input id="toggle-trigger" type="checkbox" checked data-toggle="toggle">
    <button class="btn btn-success" onclick="toggleOn()">On by API</button>
<button class="btn btn-danger" onclick="toggleOff()">Off by API</button>
<button class="btn btn-primary" onclick="getValue()">Get Value</button>
<script>
  //If you want to change it dynamically
  function toggleOn() {
    $('#toggle-trigger').bootstrapToggle('on')
  }
  function toggleOff() {
    $('#toggle-trigger').bootstrapToggle('off')  
  }
  //if you want get value
  function getValue()
  {
   var value=$('#toggle-trigger').bootstrapToggle().prop('checked');
   console.log(value);
  }
</script>

dans le cas où quelqu'un est encore à la recherche d'un bon interrupteur/bouton à bascule, j'ai suivi la suggestion de Rick et créé une directive angulaire simple autour de lui, interrupteur angulaire . En plus de préférer un commutateur de style Windows, le téléchargement total est aussi beaucoup plus petit (2KB vs 23kb CSS minified+js) par rapport à angular-bootstrap-switch et bootstrap-switch mentionnés ci-dessus ensemble.

vous l'utilisez comme suit. Tout d'abord, inclure les js et css requis dossier:

<script src="./bower_components/angular-switch/dist/switch.js"></script>
<link rel="stylesheet" href="./bower_components/angular-switch/dist/switch.css"></link>

et l'activer dans votre application angulaire:

angular.module('yourModule', ['csComp'
    // other dependencies
]);

Maintenant, vous êtes prêt à l'utiliser comme suit:

<switch state="vm.isSelected" 
    textlabel="Switch" 
    changed="vm.changed()"
    isdisabled="{{isDisabled}}">
</switch>