CODEWITHSUNDEEP
javascriptangularjs
user718229
user718229

Reputation: 573

Passing $scope variable in function wont change

I have this app that has different themes a user can pick from a navbar. At this point Im just trying to change the variable from false to true.

Here is the code I'm working on for the nav:

   <li>
       <a  ng-click="toggleTheme(blackWhite)">  Black and White theme</a>
   </li>

and here is the code in the controller. 

 $scope.blackWhite = false;
 //other themes are false
 $scope.toggleTheme = function(theme){
 theme = !theme;
 console.log($scope.blackWhite);//its still false
 }

How do I do this? Thanks

Upvotes: 1

Views: 52

Answers (2)

Tyler
Tyler

Reputation: 11509

This should work just fine if you pass a string to reference it instead:

<li>
  <a ng-click="toggleTheme('blackWhite')">Black and White theme</a>
</li>

Controller

$scope.blackWhite = false;

$scope.toggleTheme = function(theme){
  $scope[theme] = !$scope[theme];
}

You don't need to set the blackWhite or any other variable directly in your function. It's best to decouple as much as possible, which is where you were going with it originally :)

Upvotes: 2

Josh Darnell
Josh Darnell

Reputation: 11433

You're actually passing the value of $scope.blackWhite into that function, not a reference to $scope.blackWhite. So you need to update the $scope variable with the new value, like this:

$scope.toggleTheme = function(theme) {
    $scope.blackWhite = !theme;
}

Or, better yet, don't pass a variable at all, since you're just toggling a boolean value:

$scope.toggleTheme = function() {
    $scope.blackWhite = !$scope.blackWhite;
}

Then your markup would be:

<a ng-click="toggleTheme()">Black and White theme</a>

Upvotes: 4

Related Questions