AngularJS : binding radio buttons to ng-model with angular in ng-repeat

Question

I'm currently learning angular.js and I'm running into a problem. I'm listing radio buttons based on the items fetched from the database and when I click on any of them my model doesn't get updated. I added an input to test and the input update the model right away.

Any idea what i'm missing?

Update: it appears that the problem comes from bootstrap and the span wrapping the radio buttons. If I remove the spans the model gets updated

<div ng-repeat="question in questionnaire">
  <div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
    <span class="btn btn-primary">
      <input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="false"> No
    </span>
    <span class="btn btn-primary">
      <input type="radio" name="question{{$index}}" ng-model="formData[$index]" ng-value="true"> Yes
    </span>
    <input type="text" name="testEntry{{$index}}" ng-model="formData[$index]" />
  </div>
  {{formData}}
  <span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
</div>

vegas2033 · Accepted Answer · 2015-06-10 20:18:35Z

2

So it turns out that the problem was coming from the spans. I changed them to labels and it worked.

Here is the code:

<div ng-repeat="question in questionnaire">
                <div class="btn-group col-xs-offset-1 col-xs-2 col-sm-2" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="false"> No
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" name="question{{$index}}" ng-model="formData[$index]" value="true"> Yes
                    </label>
                </div>
                {{formData}}
                <span ng-bind="question.QuestionPhrase" class="message col-xs-8 col-sm-8"></span>
                <br /><br /><br />
            </div>

answered Jun 10, 2015 at 20:18

vegas2033

2501 gold badge4 silver badges16 bronze badges

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

3 Comments

Joao Polo Over a year ago

But, your problem continues? or your solution had solved your problem?

vegas2033 Over a year ago

No it's solved but apparently I need to wait 48hrs to validate my own answer. Thanks for asking.

Joao Polo Over a year ago

You're welcome! Your question is useful, because it's an estrange situation.

Collectives™ on Stack Overflow

AngularJS : binding radio buttons to ng-model with angular in ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related