Using one function with different variables

Question

Try to create two controllers with a same logic. when I use separate functions for each var it works. But when I try to pass var as parameter it does nothing.

Code here:

function Ctrl($scope) {
  $scope.Score1 = 0;
  $scope.Score2 = 0;

  $scope.add_btn = function(num) {
    $scope.num ++;
  };

  $scope.dist_btn = function(num) {
    if ($scope.num > 0) {
      $scope.num --;
    } else {
      $scope.num = 0;
    }
  };
}

</style> <!-- Ugly Hack due to jsFiddle issue: https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/132 --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>

<div ng-app>
    <div ng-controller="Ctrl">
        <button ng-click="add_btn(Score1)">+</button>
        <input type="text" value="{{Score1}}">  
        <button ng-click="dist_btn(Score1)">-</button>
        <button ng-click="add_btn(Score2">+</button>
        <input type="text" value="{{Score2}}">  
        <button ng-click="dist_btn(Score2)">-</button>
    </div>
</div>

try $scope[num] instead of $scope.num in your functions. Before you progress further, I would suggest using a service to share logic between 2+ controllers instead of shared functions like this. — ryanlutgen
– ryanlutgen, Commented Nov 24, 2014 at 8:11

Utku Apaydin · Accepted Answer · 2014-11-24 08:25:37Z

You can use this logic without useing any array, you used $scope.num but it creates a new variable on the scope so fails. this would work properly

function Ctrl($scope) {
      $scope.Score1 = 0;
      $scope.Score2 = 0;

      $scope.add_btn = function(num,from) {
        num ++;
		if(from == 1)
			$scope.Score1 = num;
		else
			$scope.Score2 = num;
      };

      $scope.dist_btn = function(num,from ) {
	  
        if (num > 0) {
          num --;
        } else {
          num = 0;
        }
		if(from == 1)
			$scope.Score1 = num;
		else
			$scope.Score2 = num;
      };
    }

</style> <!-- Ugly Hack due to jsFiddle issue: https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/132 --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<style>

<div ng-app>
    <div ng-controller="Ctrl">
        <button ng-click="add_btn(Score1,1)">+</button>
        <input type="text" value="{{Score1}}">  
        <button ng-click="dist_btn(Score1,1)">-</button>
        <button ng-click="add_btn(Score2,2)">+</button>
        <input type="text" value="{{Score2}}">  
        <button ng-click="dist_btn(Score2,2)">-</button>
    </div>
</div>

Matteo425 · Accepted Answer · 2014-11-24 08:27:20Z

Simple and dirty solution :)

There could be something better

function Ctrl($scope) {
  $scope.Score = [0, 0];

  $scope.add_btn = function(num) {
    $scope.Score[num]++;
  };

  $scope.dist_btn = function(num) {    
    if ($scope.Score[num] > 0) {
      $scope.Score[num]--;
    } else {
      num = 0;
    }
  };
}

</style> <!-- Ugly Hack due to jsFiddle issue: https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/132 --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
          <button ng-click="add_btn(0)">+</button>
              <input type="text" value="{{Score[0]}}">  
          <button ng-click="dist_btn(0)">-</button>
          <button ng-click="add_btn(1)">+</button>
              <input type="text" value="{{Score[1]}}">  
          <button ng-click="dist_btn(1)">-</button>
</div>
</div>

ymz · Accepted Answer · 2014-11-24 08:12:28Z

0

$scope.num // find num inside #scope

$scope[num] // find the member inside scope variable with the value of num (Score1 in your case)

also send the parameter from the element like this:

 <button ng-click="add_btn('Score1')">+</button>

and instead num please refactor to id or something.. in short:

 $scope.add_btn = function(id) 
 { 
    $scope[id]++;
 };

answered Nov 24, 2014 at 8:12

ymz

6,9641 gold badge26 silver badges41 bronze badges

Collectives™ on Stack Overflow

Using one function with different variables

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related