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

Question

我有一个单选按钮,它设置值True或False基于事务类型的值

该演示可以在这里找到

问题是当我点击任何单选按钮时,值$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的解决方案.您可以在不删除bootsrap.js依赖项的情况下使用.也有一个工作示例这里.

这是流程:

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>

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