AngularJS：单选按钮不适用于 Bootstrap 3

Question

我有一个单选按钮，它根据交易类型的值设置True 或False 的值

demo可以在here找到

问题是当我点击任何单选按钮时，$scope.transaction.debit 的值不会改变

我的javascript代码是

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

    app.controller("MainCtrl", function($scope){
      $scope.transaction = {};
      $scope.transaction.debit=undefined;

      console.log('controller initialized');
    });

请让我知道我做错了什么。

另外，我不想为此使用Angular-UI 或AngularStrap，除非没有其他选项可用。

Answer 1

我修改了dpineda's solution。您可以在不删除 bootsrap.js 依赖项的情况下使用。还有一个工作示例here。

这是流程：

1. 删除 data-toggle="buttons" 以防止引导程序执行。
2. 添加一些 CSS 来修复损坏的视图（btn-radio css 类）
3. 为检查样式效果添加一些 AngularJS 逻辑。

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

风格

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

Answer 2

我在bootstrap.js 中发现了问题。评论e.preventDefault()这一行，它可以工作。

// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault() //Before
    //e.preventDefault() //After
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})

Answer 3

您在单选按钮的顶部粘贴了一个大标签，该标签会阻止您输入单选按钮。 html 应为：

 <input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>

 <input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>

然后它就可以工作了，当然它可能看起来不像你想要的那样。

Answer 4

如果您删除 de bootstrap 代码，您可以使用条件控制样式

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

Answer 5

这是一个使用新指令的工作版本：

html

<section ng-controller="MainCtrl">
<div class="form-group">
    <label class="col-lg-2 control-label">Type</label>

    <div class="btn-group col-lg-3" data-toggle="buttons">
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
            Debit
        </label>
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
            Credit
        </label>
    </div>

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

javascript

// Code goes here
var app = angular.module('myApp', []);

app.controller("MainCtrl", function($scope){
  $scope.transaction = {};
  $scope.transaction.debit=undefined;

  console.log('controller initialized');
});

app.directive("radioButton", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        if (!element.hasClass('active')) {
          scope.$apply(function () {
            scope.transaction.debit = attrs.value;
          });
        }
      });
    }
  };
})

Answer 6

根据 francisco.preller 的回答，我编写了两个解决方案，试图使其适合通用使用，同时不丢失输入标签： html:

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

解决方案 #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'));
      });
    }
  };
})

解决方案 #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'); 
      });
    }
  };
})

我觉得第一个更好，因为它可以让 Angular 完成更新工作。

Answer 7

如果有人仍在寻找一种简单的方法来做到这一点（我个人很犹豫是否用指令重载我的代码），这就是我所做的：

您可以使用标签上的ng-click 设置值。此外，请注意第一个单选项目标签上的 ng-init 和 active 类。这样，您可以让 bootstrap 做它的事情，而 angular 做它的事情。唯一的缺点是您不能使用 ng-model 进行角度控制。

<div class="btn-group col-lg-3" data-toggle="buttons">
      <label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
        <input type="radio" checked> Debit
      </label>
      <label class="btn btn-default" ng-click="transaction.debit=false">
        <input type="radio"> Credit
      </label>
    </div>

Answer 8

我遇到了同样的问题。使用 ng-click 在您的标签上，它可以与引导程序一起正常工作

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

Here it's working in plunker

Answer 9

我有同样的问题，在我的情况下，默认样式更改并且不能在任何单选或复选框按钮内使用角度 ng-model。所以我读了一些文章，发现有时如果你在 Bootstrap 之后加载 JQuery，它会覆盖 jQuery 的任何其他实例，并且它会阻止默认样式和组件作为引导组件加载，如果你在 jQuery 之后加载 angularJS 也会发生这种情况，反之亦然。

PS.- 我的回答：检查您的加载脚本堆栈，使用它并找到适合您的顺序。 （首先是 jquery，然后是 angularJs，最后是 bootstrap）。通常你需要 jQuery 作为第一选择，Angular 和几乎每个新框架都在它之上工作。干杯。