Angularjs ngModel not working with complicate object.

[Peter]

I have set up two demo to replicate this issue.
One is working version with simple object.
Demo http://plnkr.co/Daz7EYzZsxmGX6661Kbc
As you can see, key code is line 36 ng-model="dataItem.firstName". So if u change any firstName in the grid, angular model got updated outside grid.

This is not working Demo http://plnkr.co/xGqJenNDzyKjcmdF1Edm
I have config same code in line 810. But two way binding not working. When i change 1st row in the grid, angular model does not updated but Kendo ObservableArray got updated.

Am i missing something.
I know i can manually update angular scope in onChange event.
But i am curious to know why one work the other one not.
There must be a reason why angular two way binding broken i am keen to know why.
Thx in advance.

[Daniel]

Hi,

The difference is not that the object is complex but that the scope field is not an ObservableArray:

$scope.people = new kendo.data.ObservableArray([

vm.subjectYearSemesterVOs = [{

When creating a dataSource or an ObservableArray from array of plain objects an observable copy of the objects will be created and the original objects will not be updated.

Regards,
Daniel
Telerik

 

 

[Peter]

I see. Thx Daniel. I came across that documentation before!!
So is there any workaround to get observerable object to keep track of updates?

My current hack is like this  vm.subjectYearSemesterVOs = vm.subjectYearSemesterGridOptions.dataSource.data().toJSON().
Basically i am mannul update vm.subjectYearSemesterVOs  via toJSON method of observerable Array/object. What do you think of this approach? Thx again.

[Daniel]

Hi again,

This is a possible solution. Another option if the scope field should not be observable is to use the dataSource to sync the change in the original array. I update the example to demonstrate how can this be achieved in the change handler.

Regards,
Daniel
Telerik

 

 

[Peter]

Thx for that.
One more thing i learned is u can set up kendo-grid = "vm.kendogridName". Then call grid in javascript without scope. I really like this elegant approach.