radio buttons are not initialized to the model

[mhevery]

I found this post from September which seems to imply the issue is fixed:
http://groups.google.com/group/angular/browse_thread/thread/520cde44a3ac15c

But I still see problems. The radio buttons all start empty (unchecked). Checking any of them puts the value in the model, but the model having a value does not check the buttons.

Test case: https://gist.github.com/818607

Displays the model, on load, as
{
"choices":["alpha","beta","gamma"],
"value":"gamma"}
But the gamma radio button is not checked. Checking any updates the 'value' property.

[arantius]

So the problem is ultimately that value is dynamically bound (value="{{choice}}"), and the logic to get/set the checked state of the radio button (radioAccessor()) runs before the logic that sets this value on the input.

That's as far as I've diagnosed this so far. It ended up sending me quite deep down the rabbit hole of Angular, for one of my relatively early ventures.

I'm seeing radioAccessor()'s set being called while value is still "on", the browser default, so the check for equality fails.

[arantius]

This is the best I've managed to come up with. It makes my linked test case work, but it makes a lot of tests fail. I don't yet understand enough about Angular's internals to do better.

arantius/angular.js@master...radio-select

[mhevery]

You can't bind to value. This is not how angular was designed.

here the value is default. If you want to change the value of the input you
don't do this

but rather this

-- Misko

On Mon, Mar 28, 2011 at 12:07 PM, arantius <
reply@reply.github.com>wrote:

This is the best I've managed to come up with. It makes my linked test
case work, but it makes a lot of tests fail. I don't yet understand enough
about Angular's internals to do better.

arantius/angular.js@master...radio-select

Reply to this email directly or view it on GitHub:
#271 (comment)

[arantius]

We don't want to change the value. We want to build the template, from data.

We request as a $resource some data, and we build a form off of said data. So we have, basically/paraphrased:

<div ng:repeat="question in questions">
<ng:switch on="question.type">
  <div ng:switch-when="radio">
  <ul>
    <li ng:repeat="choice in question.choices">
    <input type="radio" name="question.value" value="{{choice}}"> {{choice}}
    </li>
    </ul>
  </div>
  </ng:switch>
</div>

There is no way for us to write a hard-coded bit of HTML that contains radio buttons with the right value attributes, they exist only as data. They're different. For our use case, this value (choices) never changes at run time, but it can be different each time we load the page.

Is there some other way to get data into attributes besides binding?

[mhevery]

Are you running into this: #316?

On Mon, Mar 28, 2011 at 3:09 PM, arantius <
reply@reply.github.com>wrote:

We don't want to change the value. We want to build the template, from
data.

We request as a $resource some data, and we build a form off of said data.
So we have, basically/paraphrased:

    {{choice}}

There is no way for us to write a hard-coded bit of HTML that contains
radio buttons with the right value attributes, they exist only as data.
They're different. For our use case, this value (choices) never changes at
run time, but it can be different each time we load the page.

Is there some other way to get data into attributes besides binding?

Reply to this email directly or view it on GitHub:
#271 (comment)

[arantius]

That appears to be the effectively the same issue, yes. I don't see any description of what the expected result is, but the result I see is that no radio button is checked after loading (nor after clicking the 'load' link), and it seems the "that" choice should be. But if I change the selection then click 'load', the selection is properly updated.

[mhevery]

Correct. We are doing some major refactoring, and are hoping that these
things will be resolved.

On Tue, Mar 29, 2011 at 7:39 AM, arantius <
reply@reply.github.com>wrote:

That appears to be the effectively the same issue, yes. I don't see any
description of what the expected result is, but the result I see is that no
radio button is checked after loading (nor after clicking the 'load' link),
and it seems the "that" choice should be. But if I change the selection
then click 'load', the selection is properly updated.

Reply to this email directly or view it on GitHub:
#271 (comment)

[racci]

I got the same problem which radio button looked unchecked and then I fixed it like this;

    <label  data-ng-repeat="option in field.fields_option">

        <input type="radio"
               name="form-field-for-{{field.fields_id}}"
               id="form-field-{{field.fields_id}}"
               ng-model="field.value"
               value="{{option.field_options_id}}"
               />
        &nbsp; |{{ field.value }} || {{option.field_options_id }}
        <span ng-class="{'label-success' : field.value[0]==option.field_options_id}"
              ng-bind="option.field_option_label"></span>
    </label>

The thing is name="form-field-for-{{field.fields_id}}" should not be duplicated in same file.

I had a problem where radio buttons rendered by angular were not being checked by default even if their value attribute and binding seemed equal. I learned in this StackOverflow answer to use ng-value instead, and it works now. http://stackoverflow.com/questions/18518251/angularjs-radio-button-checked#comment27231547_18518425