2

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.

Birdrock
  • 63
  • 7

3 Answers3

2

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

Pak
  • 2,123
  • 22
  • 28
  • You are correct that the curly braces were unnecessary, but unfortunately, it doesn't influence the outcome. The initial radio button select still doesn't trigger based on the model loaded in. – Birdrock Jul 28 '14 at 22:01
1

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!

Birdrock
  • 63
  • 7
0

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.

Community
  • 1
  • 1
Daniel
  • 3,541
  • 3
  • 33
  • 46
  • I tried that edit, but no joy still. Thank you for the suggestion, though! – Birdrock Jul 28 '14 at 22:36
  • Have you tried simply displaying `{{selectedTag.styleGroupId}}` next to your radio button? Just to clarify if it is the correct variable... – Daniel Jul 28 '14 at 22:40
  • 1
    Daniel - Locally, I do have that, and it is evaluating to the correct value. This is why it is so baffling for me. Thanks for the suggestion - definitely makes sense to start from the most basic possibilities! – Birdrock Jul 28 '14 at 22:44
  • So, to go on with this approach: When you display the value next to it - is it updated if you select another radio button? – Daniel Jul 28 '14 at 22:46
  • The value does update. The attribute on the model changes as I hit the radio buttons. Unfortunately, on load, the corresponding button doesn't select. – Birdrock Jul 29 '14 at 00:27
  • I updated my answer with a hint to a possible solution. – Daniel Jul 29 '14 at 08:35