nested ng-model binding not working as expected

1,370 views
Skip to first unread message

wahyu...@gmail.com

unread,
Jul 25, 2012, 6:03:05 AM7/25/12
to ang...@googlegroups.com
 here is the plunker:  http://plunker.no.de/edit/XuUWDq

I am trying to bind ng-model that is inside a rather complex object but it's not working, but if I used $index, it will blur the input, but it does trigger the $watch
and i am guessing because the html gets rerendered? How do I achieve ng model binding inside a complex object?

wahyu...@gmail.com

unread,
Jul 25, 2012, 2:40:08 PM7/25/12
to ang...@googlegroups.com, wahyu...@gmail.com
@Carles: Ah that makes sense, but I have to disagree with the solution. Is there a way to bind without changing the structure of the code? I think data will most likely originate from the backend, that means we have to do some data massaging or reformat to get the binding to work. It's as if the front end dictates how the data should be structured.

wahyu...@gmail.com

unread,
Jul 25, 2012, 2:45:47 PM7/25/12
to ang...@googlegroups.com, wahyu...@gmail.com
I have a question that is rather related to the primitive binding topic.

how come $scope.variable works when we bind it? Where as $scope.variable.inside doesnt? Both are primitives

Carles Serrano

unread,
Jul 26, 2012, 6:28:51 AM7/26/12
to ang...@googlegroups.com, wahyu...@gmail.com
if $scope.variable contains anohter variable inside of it then is not a primitive but an object. :-P

if you pass an object as an argument to a function what you are passing is the reference of the object. But if you pass a primitive like a string what you are passing is the value. 
The difference maybe subtle that it´s quite important.

Anyways I´m pretty sure that both bindings would work. 
Can you please create an example where it doesn´t?

Carles Serrano

unread,
Jul 26, 2012, 6:49:44 AM7/26/12
to ang...@googlegroups.com, wahyu...@gmail.com
@wahyu

 I agree with you the front end should not dictate how the data should be structured but I think that what you are trying to do is not really possible with primitives.

 The problem you are having is that angular can´t get a hold to the reference of a primitive (it´s just not possible in javascript neither in java as far as I know) and that is why, on the second row of the table of your example the 'watch' works, because you are doing the binding to a position in the array which does has a reference .

<input type="text" ng-model="complex.two[$index]" />

and not to the primitive itself.

From here on I´m just guessing because I don´t really know how angular does the binding.

on the second row, every time you type a character on a column's input angular realizes you are changing the array and overwrittes that possition of the array with the new input value. That´s why the watch works but unfortunately as a result of changing the items of the array, angular redraws the row resulting on you loosing your focus.

Hope this could help you.

Carles
Reply all
Reply to author
Forward
0 new messages