CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
balteo
balteo

Reputation: 24699

ng-model never populated when radio button (generated by ng-repeat) is clicked

I have an issue with the following use of ng-repeat:

<div class="col-xs-12 Box">
    <hr class="inline-block">
    <h5 class="text-uppercase">2. Catégorie de Professionnelle</h5>
    <div class="btn-group col-xs-12 styleGarde" data-toggle="buttons">
        <label ng-repeat="childcareWorkerType in childcareWorkerTypes" class="btn btn-info">
            <input type="radio"
                   name="childcareWorkerType"
                   ng-required="true"
                   ng-model="$parent.advertisement.childcareWorkerType"
                   value="{{childcareWorkerType}}"/>
            {{'DOMAIN_ENUM_CHILDCARE_WORKER_TYPE_' + childcareWorkerType | translate}}
        </label>
    </div>
</div>

I use ng-inspector and I noticed that the childcareWorkerType property of advertisement is always missing. In other words the ng-model is not populated.

I tried pointing the ng-model property to the $parent scope to no avail...

Can anyone please help?

Upvotes: 1

Views: 94

Answers (1)

Ulan Murzatayev
Ulan Murzatayev

Reputation: 870

You should put the model inside some sort of a wrapper, that was created before ng-repeat is called. This will make sure that ng-repeat does not create the model in its own scope.

Controller code

function MyCtrl($scope) {
    $scope.model = {};
    $scope.types = ['one', 'two', 'three'];
}

View code

<div ng-controller="MyCtrl">
    <label ng-repeat="type in types" class="btn btn-info">
       <input type="radio"
           ng-required="true"
           name="type"
           ng-model="model.selectedType"
           ng-value="type"/>
        {{type}}
    </label>
    <div>
        Selected value: {{model.selectedType}}
    </div>
</div>

Here is the link to jsfiddle

Upvotes: 2

Related Questions