CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Birdrock
Birdrock

Reputation: 63

Angular not selecting radio button from model

I'm working on system where I have an ng-repeat populating from an array of elements, with a radio buttons setting a property. When it loads in, none of the radio buttons are selected, but when I select any of the radio buttons, it binds to the model appropriately. It works in a single format without the outer ng-repeat, so I'm not sure why it refuses to select the radio button from the model.

<div ng-repeat="selectedTag in selectedGroup.tags track by $index" ng-controller="ThemesEdit_TagStylesCtrl">
    <div class="type-select">
        <label ng-repeat="styleGroup in styleGroups.list" ng-hide="styleGroup.name == 'Settings'">
            <input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>
        </label>
    </div>

    <div ng-include src="another_page"></div>

    <div class="clear-float"></div>
    <p tag-example="selectedTag" data-style-group="styleGroup"></p>
</div>

I can see that the $parent.selectedTag.styleGroupId comes through on each selectedTag, and it triggers the options in the template that is brought in with ng-include, so I know that is pretty close to working properly. The only remaining issue seems to be that it doesn't automatically select a radio button with a defined ng-model.

I'm fairly new to angular, so it could be something completely obvious, but I was hoping someone could light my way. Thank you for any and all help!

Edit: Updated with two suggestions below. Still no joy, but thought I'd edit the code to the most current iteration.

Upvotes: 2

Views: 2279

Answers (3)

Birdrock
Birdrock

Reputation: 63

I feel pretty dumb - it was something simple that I overlooked. With a single instance, publishing with the name set in <input type="radio" name="tagType" ng-model="selectedTag.styleGroupId" ng-value="styleGroup.styleGroupId"/> <span>{{styleGroup.name}}</span>" worked fine. Once I stuffed it in an ng-repeat, it was publishing under the same name="tagType" and overwriting the selection. Sure enough, when I scrolled to the bottom of my page, the last set of radio buttons were checked appropriately.

Checking the docs, the name is optional, and removing it allowed all the radio button sets to populate properly. I haven't seen any ill effects on anything else - is there anything I should be watching for?

Thanks for the help/thoughts, everyone!

Upvotes: 1

Daniel
Daniel

Reputation: 3514

I think you should use ng-model="selectedTag.styleGroupId". selectedTag shouldn't be overwritten by your inner ng-repeat.

UPDATE:

Have a look at this SO answer ng-value needs to be set true.

Upvotes: 0

Pak
Pak

Reputation: 2213

I would say the solution is ng-value="styleGroup.styleGroupId", documentation here.

Upvotes: 2

Related Questions