How to get selected radio value using Bootstrap radio button groups and AngularJS

Question

I'm using Bootstrap radio button groups and am having a hard time getting the selected value into my controller. I have a small snippet of JS to set the selection on which button was clicked:

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

Here is example 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>

Now when I submit this with ng-submit to this function, I do not get any console logged values for my radio buttons.

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

What am I doing wrong?

have you tried declaring $scope.favorites = {} in the controller ? Explanation: if $scope.favorites is not declared, you'll not be able to access the element "color" of an undefined element. — Roux
– Roux, Commented Jan 6, 2017 at 8:06

vaultah · Accepted Answer · 2017-01-06 22:42:49Z

1

You do not need this code:

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

Your radio button is wrapped with its label so HTML5 will propagate click from the label to the radio.

Initialize your $scope.favorites object to {}

That is it, in submit you can get your $scope.favorites object with all its arguments.

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

edited Jan 6, 2017 at 22:42

vaultah

46.9k13 gold badges120 silver badges145 bronze badges

answered Jan 6, 2017 at 8:47

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get selected radio value using Bootstrap radio button groups and AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related