Binding to boolean attributes such as disabled="disabled"
greim
a pretty cool project. Love the two-way binding! Keep up the good
work.
Quick question, I have a boolean property of an object, which I'm
trying to bind to get a form control's disabled property. Since HTML
attribute is boolean:
<input type="text" disabled>
The ng:bind-attr directive seems to be the wrong choice, since I want
the very existence of the attribute to toggle, not the content of the
attribute. Does that make sense? How would this be done? I tried this
but am getting odd/inconsistent behavior:
<input type="text" disabled="{{myObj.thisIsTrueOrFalse}}">
Thanks for any help,
Greg Reimer
Misko Hevery
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<script type="text/javascript" src="http://code.angularjs.org/angular-0.9.5.js" ng:autobind></script>
<body>
<input type="checkbox" name="enabled" checked/>
<input type="text" name="name" disabled="{{!enabled}}" value="abc" />
enabled={{enabled|json}}
</body>
</html>
--
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.
greim
works, but sometimes when refreshing the page it won't initialize the
values properly. Maybe the browser's attempts to preserve form data
across reloads is colliding with angular's bindings? It doesn't seem
to happen when I hit enter from the URL bar, but when a bug is
intermittent you never know...
The UI I'm working on is a bit complicated, with the disabled state of
some form fields depending on the state of other form fields in
conjunction with rules embedded in the model. In an attempt to keep
things DRY I'm using getters to represent this state in the model,
rather than manually keeping a boolean flag in sync with some other
arbitrarily complicated aspect of the model.
var foo = {
...
get bar() { /*returns boolean*/ },
...
};
then in the markup:
<input type="text" disabled="{{bar}}">
Anyway I thought I'd make note of it here in case it helps.
Greg
> > .
Igor Minar
> Thanks. I think I have it set up properly now. Most of the time it
> works, but sometimes when refreshing the page it won't initialize the
> values properly. Maybe the browser's attempts to preserve form data
> across reloads is colliding with angular's bindings? It doesn't seem
> to happen when I hit enter from the URL bar, but when a bug is
> intermittent you never know...
I think I occasionally see this issue too. It usually goes away after
the next reload, right?
>
> The UI I'm working on is a bit complicated, with the disabled state of
> some form fields depending on the state of other form fields in
> conjunction with rules embedded in the model. In an attempt to keep
> things DRY I'm using getters to represent this state in the model,
> rather than manually keeping a boolean flag in sync with some other
> arbitrarily complicated aspect of the model.
that's how it's supposed to be done.
>
> var foo = {
> ...
> get bar() { /*returns boolean*/ },
> ...
> };
>
> then in the markup:
>
> <input type="text" disabled="{{bar}}">
>
> Anyway I thought I'd make note of it here in case it helps.
thanks!
more feedback more better :-)
/i
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.
greim
the next reload, right?
reproduce it.
Igor Minar
please do. thanks!
/i