AngularJS: How to bind a $scope variable to another $scope.variable

Question

I want to bind a $scope.variable to another $scope.variable like this:

$scope.b = '';
$scope.a = $scope.b;
$scope.b = 10;
console.log($scope.a);// It gives blank value

In other words, i want to assign $scope.b value to $scope.a whenever $scope.b get a value.

You could add a watcher to $scope.b and update $scope.a in the callback. — Ankh
– Ankh, Commented Mar 18, 2016 at 9:10
Yeah we can add $watch and assign value in the callback but i have around 200 variables which are depending on each other. Do you have any global solution for this? — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Mar 18, 2016 at 9:15
'..200 variables which are depending on each other..' that just sounds like a minefield. Are you able to give any more context to your set up? — Ankh
– Ankh, Commented Mar 18, 2016 at 9:17
Suppose i am building a web like excel sheet in which lots of fields are depending on each other values in their calculations — Mahesh Singh Chouhan
– Mahesh Singh Chouhan, Commented Mar 18, 2016 at 9:20

Serhii Kozachenko · Accepted Answer · 2016-03-18 09:13:04Z

6

In JavaScript you can copy reference to the obj and it will give you what you expect.

You need to do this:

$scope.b = {prop: 0};
$scope.a = $scope.b;
$scope.b.prop = 10;
console.log($scope.a.prop);// It gives 10

answered Mar 18, 2016 at 9:13

Serhii Kozachenko

1,40113 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mrahhal · Accepted Answer · 2016-03-18 09:24:23Z

3

You must do a watch:

$scope.$watch('b', function (newValue) {
    $scope.a = newValue;
});

$scope.b = 2;
Console.log($scope.a); // Careful! This will still be undefined, explanation below.

Angular has a digest loop that it executes to process bindings. If you want you can do a $scope.$apply() to instruct angular to run the loop or you can just leave it to do its thing, that's probably what you want in real code.

edited Mar 18, 2016 at 9:24

answered Mar 18, 2016 at 9:12

mrahhal

3,5371 gold badge25 silver badges43 bronze badges

6 Comments

Mahesh Singh Chouhan Over a year ago

Yeah we can add $watch and assign value in the callback but i have around 200 variables which are depending on each other. Do you have any global solution for this?

mrahhal Over a year ago

Perhaps you can tell us more about your use case? 200 variables depending on each other sounds weird.

Mahesh Singh Chouhan Over a year ago

Yeah, i can understand lots of variable depending on each other sounds weird, but i have to develop a realtime web page just like the excel sheet in which lots of columns are depending on each other in their calculations

mrahhal Over a year ago

Alright, so it's like any variable can have more than one dependent while also depending on other variables?

Mahesh Singh Chouhan Over a year ago

Exactly, same like excel sheet

|

zion · Accepted Answer · 2016-03-18 11:41:33Z

2

$watch will be called everytime $scope.a changes. If you have multiple data, then you can create a JSON instead of individual variables

$scope.tmp = {
  'b' : 22,
  'a' : 33
};
$scope.$watch('tmp', function() {
   $scope.tmp.a = $scope.tmp.b; // Set $scope.a here
}, true);

edited Mar 18, 2016 at 11:41

answered Mar 18, 2016 at 9:12

zion

4417 silver badges25 bronze badges

1 Comment

Ankh Over a year ago

When watching objects you should pass true as the third parameter of $watch.

JLRishe · Accepted Answer · 2016-03-18 09:17:47Z

1

You can use Object.defineProperty() to define one property in terms of another:

function myController($scope) {
  Object.defineProperty($scope, 'b', {
    get: function() {
      return $scope.a;
    },
    set: function(value) {
      $scope.a = value;
    }
  });
  
  $scope.b = 10;
  console.log($scope.a);
  $scope.a = 20;
  console.log($scope.b);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myController">
    <input type="text" ng-model="a" />
    <input type="text" ng-model="b" />
  </div>
</div>

answered Mar 18, 2016 at 9:17

JLRishe

102k19 gold badges138 silver badges171 bronze badges

3 Comments

Mahesh Singh Chouhan Over a year ago

Suppose i need to bind 100 of $scope.variables to each other, then? do i need to add this function for each variable or is there any global way?

Mahesh Singh Chouhan Over a year ago

i want to develop a realtime web page just like the excel sheet in which lots of columns are depending on each other in their calculations

NovaLogic Over a year ago

This worked well for my case. I had a string like "Hello, [name1] & [name2]" and the name variables would change with a textbox.

Ankit Pundhir · Accepted Answer · 2016-03-18 09:57:41Z

0

In javascript you can copy objects references, As what you are doing is copying the value of b to a even if you want to copy the reference. Because $scope.b is primitive type data. If you want to copy its reference it should be of non-primitive type. as,

$scope.b = {c:''};
$scope.a = $scope.b;
$scope.a.c = 10;
console.log($scope.b.c); //output 10

answered Mar 18, 2016 at 9:57

Ankit Pundhir

1,0978 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS: How to bind a $scope variable to another $scope.variable

5 Answers 5

Comments

6 Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

6 Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related