Radio Buttons are not initialized correctly ('checked') if the value-attr is filled dynamically
1,184 views
Skip to first unread message
max...@googlemail.com
Sep 18, 2010, 7:54:55 AM9/18/10
to Angular
Hi everybody,
I try to bind the value-attr of an radio to a model-value, but radios
won't get checked correctly.
Below is an example.
I found the radioAccessor - function in angular.js. I think that
function is ment to ensure the radios to be checked correctly:
set: function(value){
domElement.checked = value == domElement.value;
}
Unfortunatly, with a radio: <input type="radio"
name="form_1.selectedValue" value="{{form_1.val_a}}" />
domElement.value == "on" (what does this mean?)
does hold instead of
domElement.value == "a"
Afterwards the radios work correctly.
Could somebody explain this to me...?
Maybe the value-attrs of <input/>-Tags are not meant to be bound to
model values?
But wouldn't that be nice, especially if this is only an init/eval-
order issue...?
(btw. ng:eval-order="LAST" does not help)
Best regards,
Max
<html>
<head>
<script type="text/javascript" src="http://angularjs.org/ng/js/
angular-debug.js" ng:autobind></script>
</script>
<script>
function Ctrl ()
{
this.master_1 =
{
val_a: "a",
val_b: "b",
selectedValue: "a"
}
this.master_2 =
{
selectedValue: "a"
}
this.form_1 = angular.copy( this.master_1 );
this.form_2 = angular.copy( this.master_2 );
}
</script>
</head>
<body xmlns:ng="http://angularjs.org" >
<div ng:controller="Ctrl">
<pre>form_1: {{form_1|json}}</pre>
<!-- does not work -->
<input type="radio" name="form_1.selectedValue"
value="{{form_1.val_a}}" />{{form_1.val_a}}
<input type="radio" name="form_1.selectedValue"
value="{{form_1.val_b}}" />{{form_1.val_b}}
<hr />
<pre>form_2: {{form_2|json}}</pre>
<!-- works -->
<input type="radio" name="form_2.selectedValue" value="a" />a
<input type="radio" name="form_2.selectedValue" value="b" />b
</div>
</body>
</html>
I try to bind the value-attr of an radio to a model-value, but radios
won't get checked correctly.
Below is an example.
I found the radioAccessor - function in angular.js. I think that
function is ment to ensure the radios to be checked correctly:
set: function(value){
domElement.checked = value == domElement.value;
}
Unfortunatly, with a radio: <input type="radio"
name="form_1.selectedValue" value="{{form_1.val_a}}" />
domElement.value == "on" (what does this mean?)
does hold instead of
domElement.value == "a"
Afterwards the radios work correctly.
Could somebody explain this to me...?
Maybe the value-attrs of <input/>-Tags are not meant to be bound to
model values?
But wouldn't that be nice, especially if this is only an init/eval-
order issue...?
(btw. ng:eval-order="LAST" does not help)
Best regards,
Max
<html>
<head>
<script type="text/javascript" src="http://angularjs.org/ng/js/
angular-debug.js" ng:autobind></script>
</script>
<script>
function Ctrl ()
{
this.master_1 =
{
val_a: "a",
val_b: "b",
selectedValue: "a"
}
this.master_2 =
{
selectedValue: "a"
}
this.form_1 = angular.copy( this.master_1 );
this.form_2 = angular.copy( this.master_2 );
}
</script>
</head>
<body xmlns:ng="http://angularjs.org" >
<div ng:controller="Ctrl">
<pre>form_1: {{form_1|json}}</pre>
<!-- does not work -->
<input type="radio" name="form_1.selectedValue"
value="{{form_1.val_a}}" />{{form_1.val_a}}
<input type="radio" name="form_1.selectedValue"
value="{{form_1.val_b}}" />{{form_1.val_b}}
<hr />
<pre>form_2: {{form_2|json}}</pre>
<!-- works -->
<input type="radio" name="form_2.selectedValue" value="a" />a
<input type="radio" name="form_2.selectedValue" value="b" />b
</div>
</body>
</html>
Misko Hevery
Sep 20, 2010, 5:31:47 AM9/20/10
to ang...@googlegroups.com
Hi Max,
Yes this is a known issue: http://github.com/angular/angular.js/issues/issue/14 But for performance reasons, i don't think we will ever make it 100% transparent or perfect, but we will try to make it better then it is today.
-- Misko
--
You received this message because you are subscribed to the Google Groups "Angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.
Reply all
Reply to author
Forward
0 new messages