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

您在单选按钮的顶部贴了一个大标签，以防止输入到您的单选按钮。该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>

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