Question

我正在使用Bootstrap单选按钮组，并且很难将所选值输入控制器。我有一小段JS来设置点击按钮的选择：

$(document).ready(function() {
    $('form .btn-group label').on('click', function() {
        $(this).find('input').prop('checked', true);
    });
});

以下是HTML示例：

<form name="add-form" ng-submit="addFavorites()" novalidate>
<div class="form-group">
    <label class="control-label">Color</label>
    <div class="btn-group" data-toggle="buttons">
        <label class="btn">
            <input type="radio" name="color" value="red" class="form-control" ng-model="favorites.color" ng-required="true">Red
        </label>
       <label class="btn">
            <input type="radio" name="color" value="blue" class="form-control" ng-model="favorites.color" ng-required="true">Blue
        </label>
    </div>
</div>
</form>

现在，当我使用ng-submit将此提交给此函数时，我的单选按钮没有任何控制台记录值。

$scope.addFavorites = function() {
    angular.forEach($scope.favorites, function(value, key) {
        console.log(key, value);
    });
};

我做错了什么？

Answer 1

您不需要此代码：

(document).ready(function() {
  $('form .btn-group label').on('click', function() {
    $(this).find('input').prop('checked', true);
  });
});

您的单选按钮包含其标签，因此HTML5会将标签从标签传播到收音机。

将您的$scope.favorites对象初始化为{}

就是这样，在提交中，你可以得到你的$scope.favorites对象及其所有参数。

Plunker：http://plnkr.co/edit/OatdIsvCUBSniHHQFyxG?p=preview

如何使用Bootstrap单选按钮组和AngularJS获取选定的无线电值

1 个答案: