This is a migrated thread and some comments may be shown as answers.

Angularjs ngModel not working with complicate object.

4 Answers 83 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 03 Jul 2015, 05:03 AM

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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 07 Jul 2015, 07:40 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 07 Jul 2015, 11:19 PM

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.

0
Accepted
Daniel
Telerik team
answered on 09 Jul 2015, 11:24 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Peter
Top achievements
Rank 1
answered on 10 Jul 2015, 01:49 AM
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.
Tags
Grid
Asked by
Peter
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Peter
Top achievements
Rank 1
Share this question
or