Binding radio button to complex object prevents selected

Question

I'm binding my radio buttons to my model like so:

<input type="radio" ng-model="formData.style" ng-value="{{style}}">

Where style being a complex object with multiple properties. This is done within a ng-repeat so I have multiple of those. A style could be like this:

{"name":"kran", "size":"2"}

and so on.. I want to bind the complete object to the model so I can later save it for state and retrive it to keep working with it. But when I update the model with a saved "state" the UI does not update to show which radio button is selected. I believe this has to do with binding to a complex object not a simple value, but I'm not really sure.

the style object comes from another array like this:

<div ng-repeat="style in data.styles">

How can I solve this issue?

`ng-value` expects string and not object. [Angular Docs - ngValue](https://docs.angularjs.org/api/ng/directive/ngValue) — Rajesh, Feb 11 '16 at 08:46
Thats not really a solution, binding to a complex object seems to work fine except for the "checked" functionality. — iCediCe, Feb 11 '16 at 08:55

lisa p. · Accepted Answer · 2016-02-11T10:42:28.050

1

I was a bit wrong with my first answer. I made a working example here:

https://jsfiddle.net/lisapfisterer/szp3dudh/

HTML

<form>
    <label>Radio-Buttons</label>
    <br/>
    <label ng-repeat="style in styles">
        <input type="radio" ng-model="formData.style" ng-value="style"> {{style.name}}
    </label>
    <br/>

</form>

AngularJs

   var first = { name: "First Name", value: "First Value" };
   var second = { name: "Second Name", value: "Second Value" };
   var third = { name: "Third Name", value: "Third Value" };

   $scope.styles = [first, second, third];

   $scope.formData = {};
   $scope.formData.style = $scope.styles[0];

edited Feb 11 '16 at 10:42

answered Feb 11 '16 at 09:21

lisa p.

2,138
21
36

This way I would only save the name to my model, right? i want the whole object. See my updated question. – iCediCe Feb 11 '16 at 10:13
No. The value is just the display. You pick the whole object when selecting the name. Try it out. – lisa p. Feb 11 '16 at 10:20
I did. Changing ng-value to {{formData.name}} causes all radio buttons to be selected at all times :/ but I should bind it to style.name right? since style is the element in the array I'm iterating? – iCediCe Feb 11 '16 at 10:30
Sorry for the confusion, I didn't check the first code example. This one should work. – lisa p. Feb 11 '16 at 10:37
Also I added the ng-repeat. You can bind your model to the object of your repeat, but the display name is the style's name. – lisa p. Feb 11 '16 at 10:43
Works like a charm, thank you! I got a another problem though.... :s I'm calling a method on ng-change to check for dataLoss. Is there any way to prevet the change from that method, something like prevet.default or so... the item seems to get selected before the method is called though... – iCediCe Feb 11 '16 at 11:24
Try this: $event.stopPropagation(), see http://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation if the answer works for you, you can mark it as correct answer :) – lisa p. Feb 11 '16 at 12:53
1

$event.stopPropagation() did not work on the input object but I threw a label around at made that call the method on on-click, and then used $event.stopPropagation() which worked. Thanks a lot. – iCediCe Feb 11 '16 at 12:57

score 0 · Answer 2 · answered Mar 02 '18 at 15:54

I was battling to get the accepted answer to work, I suspect that it is because ng-repeat create a child scope, so you have to bind to the $parent:

Try this

HTML

<form>
<label>Radio-Buttons</label>
<br/>
<label ng-repeat="style in styles">
    <input type="radio" ng-model="$parent.formData.style" ng-value="style"> {{style.name}}
</label>
<br/>

Binding radio button to complex object prevents selected

2 Answers2