AngularJS: les boutons Radio ne fonctionnent pas avec Bootstrap 3

J'ai modifié dpineda de la solution. Vous pouvez utiliser sans enlever bootsrap.js la dépendance. Il y a aussi un exemple de travail ici.

C'est l'écoulement:

1. Supprimer data-toggle="buttons" pour la prévention de bootstrap exécution.
2. Ajouter un peu de CSS pour la fixation de la vue interrompue (btn-radio de classe css)
3. Ajouter quelques AngularJS logique pour vérifié l'effet de style.

html

<div class="btn-group col-lg-3">
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
    <input type="radio" data-ng-model="transaction.debit" value="0"> Debit
  </label>
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
    <input type="radio" data-ng-model="transaction.debit" value="1"> Credit
  </label>
</div>

<p>Transaction type: {{transaction.debit}}</p>

JavaScript

var app = angular.module('myApp', []);

app.controller("MainCtrl", function($scope) {

  $scope.transaction = {
    debit: 0
  };
});

Style

.btn-radio > input[type=radio] {
  position       : absolute;
  clip           : rect(0, 0, 0, 0);
  pointer-events : none;
}

OriginalL'auteur Fırat KÜÇÜK

si vous retirez de code d'amorçage, vous pouvez contrôler les styles avec des conditions

<label class="btn btn-default" ng-class="{'active': transaction.debit == 'some'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="some"> Some
</label>
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'other'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="other"> Other
</label>

OriginalL'auteur dpineda

Basé sur francisco.preller de réponse, j'ai écrit deux solutions à essayer de l'adapter pour un usage générique, sans perdre la balise input:
html:

        <label class="btn btn-info" radiobuttonlbl>
          <input ng-model="query.gender" type="radio" value="0">male
        </label>

solution #1:

.directive("radiobuttonlbl", function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        var input_elem = angular.element(element.find('input')[0]);
        (function(o, s, v) {
          s = s.replace(/\[(\w+)\]/g, '.$1');
          s = s.replace(/^\./, '');
          var a = s.split('.').reverse();
          while(a.length>1) {
            var k = a.pop();
            o = o[k];
          }
          scope.$apply(function(){ o[a.pop()]=v;});
        })(scope, input_elem.attr('ng-model'), input_elem.attr('value'));
      });
    }
  };
})

Solution #2:

.directive("radiobuttonlbl", function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        var input_elem = angular.element(element.find('input')[0]);
        input_elem.prop('checked',true);
        input_elem.triggerHandler('click'); 
      });
    }
  };
})

J'ai le sentiment que le premier est mieux parce qu'il angulaire de faire le travail de mise à jour.

OriginalL'auteur Shlomi Loubaton

J'ai eu le même problème. Utilisation ng-cliquez sur vos étiquettes et cela fonctionnera très bien avec bootstrap

<label class="btn btn-default" ng-click="transaction.debit = 'debit'">

Ici, il travaille dans plunker

OriginalL'auteur osm0sis