Two way binding not working when used with ng-change

2,099 views
Skip to first unread message

Andy

unread,
May 17, 2012, 5:46:21 AM5/17/12
to AngularJS
Hi All,

http://jsfiddle.net/auastro/M74DS/

In this fiddle, when selecting a value from the drop down,
the value should always reset to the first one.
Instead, the model and the select become out of sync.

Peter Bacon Darwin

unread,
May 17, 2012, 5:54:30 AM5/17/12
to ang...@googlegroups.com
I think you trouble is that the model is being updated by ngModelController after the ngChange event is handled so although your reset method is changing the $scope.select field, the ngModelController is then setting back to the selected item automatically.  You can get around this by deferring the change, http://jsfiddle.net/sGJfD/, but it would be better to get inside ngModel (i.e. create a directive that hooks into the ngModel $parsers pipeline) and reset the value there.
Pete


--
You received this message because you are subscribed to the Google Groups "AngularJS" 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.


Pawel Kozlowski

unread,
May 17, 2012, 6:08:34 AM5/17/12
to ang...@googlegroups.com
Hi Andy!
Looking at your jsFiddle and trying to understand what are you trying
to achieve here, functionally speaking, as I'm a bit puzzled.

It looks like you've got a dropdown to allow people to select items
and store the selected item in the 'selected' model. So, when people
are selecting something the 'selected' model should be udated to what
was seleced, right? At the same time you've got ng-change that will
_also_ try to update the 'selected' model with a very specific item,
regardles of the user's selection....

So I'm a bit puzzled since for me it looks like you are trying to
allow people to select things and - at the same time - force certain
selection... I guess I'm missing something obvious here, so it would
be great if you could elaborate...

I've created a jsfiddle with both reset and on-change observing
functionality: http://jsfiddle.net/xnCLe/1/ but once again, not sure
what you are looking for.

I guess that in your example angual gets confused since it doesn't
know which selection (coming from the dropdown or the one from
on-change) should be taken into account.

Cheers,
Pawel

Andy

unread,
May 17, 2012, 6:19:22 AM5/17/12
to AngularJS
Thanks for the responses guys, they have both helped me a lot.

Perhaps there is a better way to achieve the functionality I'm looking
for,
but simply explained, I would like to allow users to add a set of pre-
canned
items to a list. They do this by clicking on a drop down and when an
item
is selected from that drop down it is added to the list and the drop
down
goes back to displaying something like "Add an item..."

I'm sure there is a nicer way to do this, but I haven't figured it out
yet,
very much looking forward to reading your suggestions,

Thanks again

AK

On May 17, 8:08 pm, Pawel Kozlowski <pkozlowski.opensou...@gmail.com>
wrote:
> Hi Andy!
>
> On Thu, May 17, 2012 at 11:46 AM, Andy <kitchen.a...@gmail.com> wrote:
> > Hi All,
>
> >http://jsfiddle.net/auastro/M74DS/
>
> > In this fiddle, when selecting a value from the drop down,
> > the value should always reset to the first one.
> > Instead, the model and the select become out of sync.
>
> Looking at your jsFiddle and trying to understand what are you trying
> to achieve here, functionally speaking, as I'm a bit puzzled.
>
> It looks like you've got a dropdown to allow people to select items
> and store the selected item in the 'selected' model. So, when people
> are selecting something the 'selected' model should be udated to what
> was seleced, right? At the same time you've got ng-change that will
> _also_ try to update the 'selected' model with a very specific item,
> regardles of the user's selection....
>
> So I'm a bit puzzled since for me it looks like you are trying to
> allow people to select things and - at the same time - force certain
> selection... I guess I'm missing something obvious here, so it would
> be great if you could elaborate...
>
> I've created a jsfiddle with both reset and on-change observing
> functionality:http://jsfiddle.net/xnCLe/1/but once again, not sure
Reply all
Reply to author
Forward
0 new messages