CODEWITHSUNDEEP
javascriptangularjsradio-buttonangularjs-forms
Marco Jr
Marco Jr

Reputation: 6806

Angular - using radio buttons

I believe I'm following correctly the AngularJS official documentation for radio buttons.

So, I created this code: 

indexSelected={{indexSelected}}
<form name="form">
    <div class="form-group">
        <label ng-repeat="s in prices track by $index" style="width: 100%">
            <input type="radio" name ="option" ng-model="indexSelected" value="{{s.months}}"> {{s.price}} + vat
        </label>
    </div>
</form>

Also, I made other attempting using ng-value, like this...

indexSelected={{indexSelected}}
<form name="form">
    <div class="form-group">
        <label ng-repeat="s in prices track by $index" style="width: 100%">
            <input type="radio" name ="option" ng-model="indexSelected" ng-value="s.months"> {{s.price}} + vat
        </label>
    </div>
</form>

and this is my controller

angular
.module('app')
.controller('ModalInstanceUpgradeSolutionCtrl', function ($scope,$rootScope, $uibModalInstance, appId) {
    $scope.prices = [{
        months: 1, price : 20
        }, { months 2: price: 40}]
     });

The question is: What could be wrong ? because when I click on the radio buitton, this is not updating the model indexSelected. Any clue ?

Upvotes: 0

Views: 81

Answers (1)

Marco Jr
Marco Jr

Reputation: 6806

Ok, found the error. @charlietfl gave me some hint. Enough to google it.

If I replace ng-model="indexSelected" for ng-model="$parent.indexSelected", this will access the parent scope. ng-repeat creates a child scope.

Upvotes: 1

Related Questions