angularjsinputradio-buttonangularjs-ng-repeatangularjs-ng-value

ng-repeat radio button 2-way binding issue, only last item set correctly


I am using angularjs to repeat radio button groups with the following code.

<div class="row observation-point"
         ng-repeat="observationPoint in question.observationPointList">
        <div class="col-md-6 col-sm-6">
            <small>{{observationPoint.text}}</small>
        </div>
        <div class="col-md-4 col-sm-4 col-md-offset-2 col-sm-offset-2">
            <label class="radio-inline">
                <input type="radio" ng-disabled="observation.status != 'Open'"
                       name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
                       id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-1" ng-value="true"
                       ng-model="observationPoint.observed">{{'observation-domain.html.yes' | translate}} {{observationPoint.observed}}
            </label>
            <label class="radio-inline">
                <input type="radio" ng-disabled="observation.status != 'Open'"
                       name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
                       id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-0" ng-value="false"
                       ng-model="observationPoint.observer">{{'observation-domain.html.no' | translate}}
            </label>


        </div>
    </div>

With angular 1.2.28 this worked fine, however we've recently upgraded to 1.4.2 and now the result is as in the picture below.

enter image description here

The model values are correctly saved and restored (see the true and false values in the image) in the variables, but only the last radio button in the ng-repeat is selected after reloading the page.

Why is this happening, because I really don't understand what the problem is and how to fix this.

nb. observationPoint.observer contains a boolean value not a string

EDIT: i've created a simplified plunker and of course this works as intended :S http://plnkr.co/edit/tWjizHB8I5FNZVOgdq6J?p=preview

Which would suggest something is wrong with the naming or id's. However when I check with the developer tools id and name seem fine enter image description here


Solution

  • I've found a solution, if I change the dynamic names from

    name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
    

    to

    name="observationPoint_{{observationPoint.id}}"
    

    it works without a hitch. I presume there is some sort of loading/timing issue going on. The variables are probably not unique at the moment the UI is rendered and causes only the last item to be set.