AngularJS - change variable value with if else statement when scope changes

Question

I have a variable that I want to change when another scope changes its value.

$scope.switch = true;

var thing;
if ($scope.switch == false) {
    thing = "givesFalse";
}
else {
    thing = "givesTrue";
};
this.thingscope = thing;

So when I change $scope.switch value to false, this.thingscope should output givesFalse. In order to change the scope value, I use ng-click:

<div ng-controller="myCtrl as myCtrl" ng-app="myApp">
    {{myCtrl.thingscope}}
    <br>
    <a ng-click="switch = !switch">{{switch}}</a>   
</div>

But even that I can see that the scope does update, the variable thing doesn't seem to update at the same time. You can see the working plunkr here. Thanks in advance!

joseglego · Accepted Answer · 2016-06-05 13:54:34Z

4

You have 2 options:

0 - Automatic: Using Watch

$scope.$watch('switch', function () {
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
});

1 - Manual: Use a custom function which change both values.

ng-click="switch = !switch"

change it to:

ng-click="customFunction()"

And define in the controller:

$scope.customFunction = function () {
  $scope.switch = !$scope.switch;
  $scope.thing = $scope.switch ? "givesTrue" : "givesFalse";
}

answered Jun 5, 2016 at 13:54

joseglego

2,1091 gold badge20 silver badges32 bronze badges

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

10 Comments

Joe82 Over a year ago

I used the second one and it works perfect (plnkr.co/edit/FGovwUjEZtaRgkO85S0q?p=preview) Thanks for the approach!

joseglego Over a year ago

Here is a http://plnkr.co/edit/1DvOpeRsyXEhmQzgE7Nl?p=preview based on your previous plnkr. With both implementations:

Maurice Reeves Over a year ago

@joe82 - My recommendation is that you use the $scope.watch method, as that's what it's built for. Let Angular do the majority of the work for you.

Joe82 Over a year ago

@JoséLezama in the first implementation, how is it suppose to work? I cannot switch it in the plunkr by clicking the switch link

joseglego Over a year ago

@Joe82 Check the Plunkr: plnkr.co/edit/v8VscDRUhVd0IG0bNYjq?p=preview Please use $scope instead this (is more Angular Way). I assume you are using lodash (or underscore, I prefer lodash so I include lodash over underscore). Plus, I didn't find the ng-lodash CDN but you must use for a more elegant code. github.com/rockabox/ng-lodash I use it without problem. I just: - Change this to $scope - Add the lodash lib.

|

Neozaru · Accepted Answer · 2016-06-05 13:42:30Z

1

The main point is that your Controller's code will be executed only once when your Controller is instanciated. If you want it to respond to changes, you'll need to use $watch.

$scope.$watch('switch', function(newSwitchValue, oldSwitchValue) {
  if ($scope.switch == false) {
    $scope.thing = "givesFalse";
  }
  else {
    $scope.thing = "givesTrue";
  }
});

In a real-world app where the architecture and performance matters, I would advise you to call directly a function from the ng-click.

ng-click="onClickSwitch()"

Then define the function onClickSwitch() in the $scope.

$scope.onClickSwitch = function() {
    $scope.switch = !$scope.switch;
    [code as above]
}

answered Jun 5, 2016 at 13:42

Neozaru

1,1502 gold badges10 silver badges25 bronze badges

3 Comments

Joe82 Over a year ago

I'm not really sure how to implement it with my code, as it is slightly different, see updated plunkr (plnkr.co/edit/il5R7L8kOQwkCfPyetA9?p=preview)

Neozaru Over a year ago

plnkr.co/edit/i260kK85zTniDDk3nmVQ?p=preview Here is a fork without using $watch

Joe82 Over a year ago

I mark it as correct as the answer is more complete and related with my approach. Thanks!

Collectives™ on Stack Overflow

AngularJS - change variable value with if else statement when scope changes

2 Answers 2

10 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related