Dynamic Scope Assignment
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app="demo" ng-controller="DemoController">
<h3>Regular Property</h3>
$<input type="text" ng-model="homeWarranty" value="0.00" ng-change="update('homeWarranty')" ng-model-options="{ updateOn: 'blur' }"> {{ homeWarranty }}
<h3>Complex Property</h3>
$<input type="text" ng-model="warrantyTypes.homeWarranty" value="0.00" ng-change="update('warrantyTypes.homeWarranty')" ng-model-options="{ updateOn: 'blur' }"> {{ warrantyTypes.homeWarranty }}
</div>
JavaScript
var app = angular.module('demo', []);
app.controller('DemoController', function($scope) {
$scope.homeWarranty = 500;
$scope.warrantyTypes = {
homeWarranty: 1000
};
$scope.update = function(propName) {
//If it's a complex property then we'll have to split it into parts
var propParts = propName.split('.');
if (propParts.length === 1) {
$scope[propName] = change($scope[propName]);
} else if (propParts.length === 2) {
$scope[propParts[0]][propParts[1]] = change($scope[propParts[0]][propParts[1]]);
}
};
function change(val) {
//Add 1 just to change the data
return parseFloat(val) + 1;
}
});