devdropper87 devdropper87 - 18 days ago 6
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,

amount
in this case. I have accomplished that first part using ng-model. When the user clicks on a button to pay, I want
amount
(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
amountDue.due
.

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,
amountDue.due
) on init and have this saved in another property (in this case
amount
)?

So in this case if
paymentClicked
I want the ng-model to take an initial value of
amountDue.due
, but I want that value saved in the
amount
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)" />' })
}
}

Answer

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