AngularJS change scope variable on ng-click passing the variable in a function

Question

Okay I have multiple scope variables. I pass them into a toggle function like this.

<button ng-click="controller.toggle(controller.data.variable)">Change</button>

On click I want to change the variable like this

controller.toggle = function(data) {
    if(toggled) {
        data = 'test';
    }
}

Is there any way to achieve this?

I have already searched for solutions but found nothing.

The variable "data" is updated but the scope variable itself (controller.data.variable) isn't. — Marco
– Marco, Commented Sep 25, 2015 at 20:56

o4ohel · Accepted Answer · 2015-09-25 22:18:04Z

2

Does this help?

HTML:

<div ng-controller="MainCtrl">

  <div>
    <button ng-click="toggle('variable1')">Change Variable 1</button>
  </div>

  <div>
    <button ng-click="toggle('variable2')">Change Variable 2</button>
  </div>

  <pre>variable1: {{variable1}}</pre>
  <pre>variable2: {{variable2}}</pre>
</div>

JS:

angular.module('myApp', []).controller('MainCtrl', function($scope) {
  $scope.variable1 = 'on';
  $scope.variable2 = 'off';

  $scope.toggle = function(propName) {
    var val = $scope[propName];
    $scope[propName] = val === 'on' ? 'off' : 'on';
  };
});

UPDATED example (please don't hate me for using eval)

html:

<div ng-controller="MainCtrl">
  <div>
    <button ng-click="toggle('settings.section.value1')">Change Variable 1</button>
  </div>
  <div>
    <button ng-click="toggle('settings.section.value2')">Change Variable 2</button>
  </div>

  <pre>variable1: {{settings.section.value1}}</pre>
  <pre>variable2: {{settings.section.value2}}</pre>
</div>

js:

angular.module('myApp', []).controller('MainCtrl', function($scope) {
  $scope.settings = {
    section: {
      value1: 'on',
      value2: 'off'
    }
  };

  $scope.toggle = function(prop) {
    var val = eval("$scope." + prop);
    if(val === 'on') {
      eval("$scope."+ prop +"= 'off'");
    } else {
      eval("$scope."+ prop +"= 'on'");
    }
  };
});

edited Sep 25, 2015 at 22:18

answered Sep 25, 2015 at 21:15

o4ohel

1,78913 silver badges12 bronze badges

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

2 Comments

Marco Over a year ago

I also tried this, but the problem is that the variable is multidimensional. Something like settings.section.value, so accessing it like this doesn't work either (at least how I tried it)

o4ohel Over a year ago

@Marco I've updated the answer, but it's not pretty :)

Collectives™ on Stack Overflow

AngularJS change scope variable on ng-click passing the variable in a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related