Angular - using radio buttons

Question

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 ?

You are breaking the golden rule of not using an object in ng-model and thus will run into child scope problems due to ng-repeat — charlietfl
– charlietfl, Commented Feb 25, 2017 at 13:36

Marco Jr · Accepted Answer · 2017-02-25 13:50:25Z

1

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.

answered Feb 25, 2017 at 13:50

Marco Jr

6,84811 gold badges56 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Angular - using radio buttons

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