CODEWITHSUNDEEP
angularjsdata-binding
Grammka
Grammka

Reputation: 65

Angular two way data-binding in dependent fields

I needed help. 1st of sry for my english. Im trying to create 3 fields that dependent from each other, for exp:

$scope.model = {
    a: 12,    // a = c - b
    b: 14,    // b = c - a
    c: null   // c = a + b
};

<input ng-model="model.a">
<input ng-model="model.b">
<input ng-model="model.c">

I'd like to calculate value of each field when one of them will be changed

UPDATE 1: Sry I forgot important part of the problem. How to create abstract model for dynamically variables and dependencies? We can change variables from controllers, so is it possible to create such thing? =/

Example (as I see this):

angular.module('App').controller('MyCtrl', function ($scope) {
    $scope.model = {
        items: [
            {id: 'some another field'},
            {id: 'a', calculate: 'c - b'}, 
            {id: 'b', calculate: 'c - a'}, 
            {id: 'c', calculate: 'a + b'},
            {id: 'some another field'}
        ]
    }
});

angular.module('App').directive('calculate', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            // The magic appears here :D
        }
    }
});

<div ng-controller="MyCtrl">
    <div ng-repeat="item in model.items", ng-attr-calculate="item.calculate">{{ item.value }}</div>
</div>

UPDATE 2:

I done it for me, here is example: https://github.com/grammka/ngTableCalculate Maybe will be useful for smbd. It's half abstracted, so if smbd fork it and make yum it will be nice :D

Upvotes: 1

Views: 1977

Answers (4)

Venkateswara Rao
Venkateswara Rao

Reputation: 5392

Even I am not sure how to implement for angular, one suggestion is to separate view fields from logical actual set. i.e Keep two different set of fields for view and logic calculation.

Whenever a change happen trigger a function in service and cross check the validity inside service. Based on outcome do whatever in the UI to view fields...

This way, you could suggest better way to the user in intuitive way...

Upvotes: 0

Grammka
Grammka

Reputation: 65

I done it for me, here is example: https://github.com/grammka/ngTableCalculate Maybe will be useful for smbd. It's half abstracted, so if smbd fork it and make yum it will be nice :D

Upvotes: 0

V31
V31

Reputation: 7666

You can have a $watch on the collection using $watchCollection function of angular to look for any changes in the scope variable model and do the calculations as necessary.

Code for $watchCollection:

$scope.$watchCollection("model",function(newValue, oldValue){
  if (newValue !== oldValue) {
    $scope.model.a = $scope.model.c - $scope.model.b;
    $scope.model.b = $scope.model.c - $scope.model.a;
    $scope.model.c = $scope.model.a + $scope.model.b;
  }
});

Working Plunkr

Reference for $watchCollection (search for $watchCollection in this page)

Upvotes: 0

Mathieu Bertin
Mathieu Bertin

Reputation: 1624

just add on all your fields

<input ng-model="model.a" ng-change="compute()">
<input ng-model="model.b" ng-change="compute()">
<input ng-model="model.c" ng-change="compute()">

and in your controller define 

$scope.compute = function() {
  //Do your calculation HERE
};

Upvotes: 1

Related Questions