Angularjs input radio and ng-repeat issue

Question

Okay so here is my setup i have the following array:

answers = [answer1, answer2]

with these i do the following:

    <form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
    <div class="col-xs-1" style="width: 1%">
        <div class="radio">
            <label class="i-checks">
                <input type="radio" name="a" ng-model="answer.is_correct">
                <i></i>
            </label>
        </div>
    </div>
    <div class="col-xs-11">
        <input type="text"  ng-model="answer.answer" class="form-control" placeholder="Svar">
    </div>
</div>
</form>

Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true

However what happens right now is that if i click the first and then second both values have is_correct = true

So what can i do?

a better oliver · Accepted Answer · 2015-03-19 18:54:42Z

1

Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:

<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">

If you really need to set a flag you can easily achieve that with a watcher:

$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
  component.question.answers.forEach(function(answer) {
    answer.is_correct = answer === correctAnswer ? true : false;
  });
});

answered Mar 19, 2015 at 18:54

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Angularjs input radio and ng-repeat issue

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