1

Working on angular 1.5.x

I am using radio buttons but not using string values to be stored in model, instead it is a object.

The two way binding is giving issue and UI does not reflect the radio button selected based on model value. So you select something it gets selected and value in the model is present.There is a save function which will save the values. And when you reload the page or reopen the Radio button should be selected based on value present in model. That is when the 2 way binding failing.

Model

Option opt{
    Yes:"Yes"
    No:"No"
    Maybe:"May be"
}

here Yes,No ,May Be are three radio checkbox in a row for same label. When i select Yes the model will have the Yes:"Yes" object , and when we open the page after saving the model values to server the UI should automatically select Yes Radio button as checked because model already have value Yes. Template 

<input ng-value="{{opt}}"  ng-model="request.opt" type="radio">

Tried different solutions but not working. Instead of ng-value used value but that only supports string not objects so will not support the use case.

In ng-value case the model value does not reflect on screen UI.While saving the selected radio to server don't have any issue the model have correct values but while opening page again the radio is not getting checked based on model value, it simply comes blank for all the radio buttons in that group.

NeverGiveUp161
  • 824
  • 12
  • 33
  • Comparing the `ng-value` object to the `ng-model` object can be problematic. Even though the objects have the same *contents*, they do not have the same *reference value*. One object comes from the server; the other from the code. – georgeawg Mar 13 '19 at 18:59
  • @greg : In my other question there is working snippet for this.https://stackoverflow.com/questions/52168091/angularjs-ng-model-not-binding-to-ng-checked-for-input-type-radio-using-wit – NeverGiveUp161 Mar 14 '19 at 10:17
  • When asking a question about a problem caused by your code, you will get much better answers if you provide code people can use to reproduce the problem. That code should be… Complete – **in the question itself.** See [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – georgeawg Mar 14 '19 at 16:15

1 Answers1

0

Template

̶<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶v̶a̶l̶u̶e̶=̶"̶{̶{̶o̶p̶t̶}̶}̶"̶ ̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶r̶e̶q̶u̶e̶s̶t̶.̶o̶p̶t̶"̶ ̶t̶y̶p̶e̶=̶"̶r̶a̶d̶i̶o̶"̶>̶
<input ng-value="opt"  ng-model="request.opt" type="radio">

Interpolation ({{ }}) erroneously converts the object to a string.

See Why mixing interpolation and expressions is bad practice.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
  • I tried by using interpolation from the template but the problem is afters saving the model to server when page is opened again the radio button does not get checked. – NeverGiveUp161 Mar 13 '19 at 14:36
  • from your link and answer , i updated my template like `ng-checked="opt.Yes==$ctrl.defCode"` but no luck – NeverGiveUp161 Mar 13 '19 at 14:38