Manipulating a variable in AngularJS based on scope changes using an if-else statement

Question

Manipulating a variable in AngularJS based on scope changes using an if-else statement

I am facing an issue where I need to update a variable based on changes in another scope.

$scope.switch = true;

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

Essentially, when the value of $scope.switch is changed to false, this.thingscope should output givesFalse. To achieve this, I utilize ng-click:

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

Although the scope updates correctly, the variable thing does not seem to update simultaneously. For a working example, please refer to the following Plunkr: here. Thank you for your assistance!

javascript angularjs

Answer 1

Answer №1

You are presented with two choices:

Option 0 - Automatic: Utilizing the 'Watch' feature

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

Option 1 - Manual: Implementing a custom function to modify both values.

ng-click="switch = !switch"

Modify it to:

ng-click="customFunction()"

Then, define the custom function in the controller:

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

Answer 2

You are presented with two choices:

Option 0 - Automatic: Utilizing the 'Watch' feature

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

Option 1 - Manual: Implementing a custom function to modify both values.

ng-click="switch = !switch"

Modify it to:

ng-click="customFunction()"

Then, define the custom function in the controller:

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

Answer 3

Answer №2

It's important to note that the code within your Controller will only run once upon instantiation. To make it respond to changes, you'll need to utilize $watch.

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

In a practical application where efficiency and performance are key considerations, I recommend directly calling a function from the ng-click.

ng-click="onClickSwitch()"

You can then define the function onClickSwitch() within the $scope.

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

Answer 4

It's important to note that the code within your Controller will only run once upon instantiation. To make it respond to changes, you'll need to utilize $watch.

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

In a practical application where efficiency and performance are key considerations, I recommend directly calling a function from the ng-click.

ng-click="onClickSwitch()"

You can then define the function onClickSwitch() within the $scope.

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

Manipulating a variable in AngularJS based on scope changes using an if-else statement

Answer №1

Answer №2

Similar questions

Functions properly in JSFiddle, but fails in the browser even when surrounded by a document ready handler

"Encountering issues with CSRF token validation in an Angular SpringBoot application when making an Ajax POST request, resulting in an

What is the best way to add a CSS rule to JavaScript?

The server's response returned a 400 HTTP status code along with the error that the requested resource does not have the 'Access-Control-Allow-Origin' header. This issue is common in MEAN

Create a fixed navbar while scrolling in Angular 5

Issues with Promise execution sequence in ExpressJS Middleware

Designing a pair of elements within a single container

Performing an ajax call to trigger JavaScript with specified parameters and retrieving the response, all within a

Express encounters an undefined value in req.body

Only display the child component once the asynchronous function in the parent's mounted hook has finished executing

JavaScript enables running Acrobat Run profiles with variables

The initial page of a Visual Studio ASP.NET MVC project displays the full URL

Obtaining only a portion of the text when copying and editing it

What is the best way to prevent drag functionality in a block?

How can you call a JavaScript function from C# using SignalR?

Conceal and unveil stationary navigation when scrolling back to the very top of the screen

Choose checkboxes based on the checkboxes that were previously selected

Passing identical props to multiple children in React

Ensure that an async function's result is resolved before rendering react routes

The JavaScript function triggers a rearrangement of every element on the webpage