AngularJS ng-repeat with radio inputs

Question

I have a list of options as an enum:

var Options = {
    Option0: 0,
    Option1: 1,
    Option2: 2,
    Option3: 3,
    Option4: 4    
};

And a sub-list of available options:

var availabledOptions = [
  Options.Option0,
  Options.Option2,  
  Options.Option4  
];

I then try to show the list of available options as radio inputs but it doesn't work and I'm wondering why. $scope.selectedOption is not updated.

function main($scope) {

    $scope.availabledOptions = availabledOptions;

    $scope.selectedOption = Options.Option2;   

}
</script>

<div ng-app ng-controller="main">       
    <ul>
        <li ng-repeat="option in availabledOptions">
            <input name="options" type="radio" ng-model="selectedOption" ng-value="option">option #{{option}}
        </li>
    </ul>
    selected option: option #{{selectedOption}}
</div>

http://jsfiddle.net/1xgsqL67/

I tried ng-repeat="option in availabledOptions track by $index" and also without the name attribute, but it still doesn't work.

Thanks in advance!

Khan · Accepted Answer · 2015-10-01 18:31:57Z

1

Try the following:

ng-model="$parent.selectedOption"

My understanding is that ng-repeat creates it's own scope, and you have to go up one level.

answered Oct 1, 2015 at 18:31

Khan

18.2k5 gold badges52 silver badges60 bronze badges

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

1 Comment

show-me-the-code Over a year ago

Or you could create set the model to an attribute of a different object in the scope like so: $scope.selectedOption = {}; and ng-model="selectedOption.selected".

Collectives™ on Stack Overflow

AngularJS ng-repeat with radio inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related