devdropper87 devdropper87 - 3 months ago 16
AngularJS Question

angular js - point ng-model to one property of an object initially, but sync back to another

I have a kendo ui grid, where each row is editable, and in a specific column I want to sync the inputs data to the underlying grid data (an array of objects) while the user is typing, and bind the input value to one specific property on the data Item,

in this case. I have accomplished that first part using ng-model. When the user clicks on a button to pay, I want
(also a property in the data item) to be set to another property's value (which also is in the same object) which is called

This is what I tried, it is working OK in the first case where the user has not clicked on the button to pay. However, I can't figure out the case when the user has clicked pay - the nested if below is not working. in angularjs, how do I point an ng-model to one property of an object (or in this case a nested property,
) on init and have this saved in another property (in this case

So in this case if
I want the ng-model to take an initial value of
, but I want that value saved in the
property. I am trying to do this with angular as much as possible and not kendo.

if (columnName.field == 'amount') {
angular.extend(columnName, { template: '<input type="text" class="k-textbox" ng-model="$ctrl.dataSourceName[dataItem.index].amount"/>' })
if (paymentClicked) {
angular.extend(columnName, { template: '<input type="text" class="k-textbox" ng-init="$ctrl.dataSourceName[dataItem.index].amount = dataItem.amountDue.due" ng-model="$ctrl.dataSourceName[dataItem.index].amountApplied" ng-change="$ctrl.change($event)" />' })


I'd set $scope.dataSourceName[index].amount = dataItem.amountDue.due in the paymentClicked click event handler.