AngularJS problems with radio button not selecting

Question

I'm trying to catch the ng-change event on a radio button, but the problem is that it only gets checked when I click for second time on any of the radios in the same group. Also, when I click on a radio for first time, ng-changed gets called, but it doesn't if I click again in another radio button or in the same one.

<div>
<div ng-repeat="element in questions" ng-class="{'in':$first,'hidden': !$first}">
    <h1>{{element.question}}</h1>
    <div>
        <input type="radio" name="answer" ng-value="A" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerA}}</input>
        <input type="radio" name="answer" ng-value="B" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerB}}</input>
        <input type="radio" name="answer" ng-value="C" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerC}}</input>
    </div>
</div>
<button id="prev" class="hidden" ng-click="prevQuestion()">Anterior</button>
<button id="next" ng-click="nextQuestion()" disabled>Siguiente</button>
</div>

What could be wrong with this? Thanks in advance.

First, input tag is a self-closing tag, then your HTML is semantically incorrect. — developer033
– developer033, Commented Jul 10, 2016 at 20:51
You could provide a simple demo in plnkr to demonstrate how is your JS controller and complete view.. it's hard to tell something this way.. — developer033
– developer033, Commented Jul 11, 2016 at 16:26

Community · Accepted Answer · 2017-05-23 11:44:14Z

1

Since ng-repeat creates its own $scope, as you can see in this answer, you must use, preferably, controller-as-syntax to achieve what you want.

A demo working with your code:

DEMO

Note: I don't know if you're using jQuery for something else besides hide/disable buttons, but all that things can be easily done with Angular, like this:

<input type="radio" ng-model="main.answer" value="A" ng-change="enableSubmit()" />

$scope.enableSubmit = function() {
    $('#next').prop('disabled', false);
};

Should be just this in view:

<button ng-disabled="!main.answer" id="next" ng-click="nextQuestion()">Siguiente</button>

I hope it helps!

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 11, 2016 at 17:44

developer033

25k8 gold badges85 silver badges113 bronze badges

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

1 Comment

developer033 Over a year ago

You're welcome, can you check the answer as correct? Just clicking on the left <=====

Collectives™ on Stack Overflow

AngularJS problems with radio button not selecting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest