ng-click - Using functions for property values

Question

I'm creating a calculator app in AngularJS, but am having trouble with ng-repeat and ng-click.

<div class="col-md-3">
  <button ng-repeat="op in operations" name="btn{{ op.name }}"
          value="{{ op.symbol }}" class="operationbutton" 
          ng-click="{{ op.function }}"> {{ op.symbol }}
  </button>
</div>

In my app.js, inside my controller, I have an operations variable tied to $scope.

$scope.operations = [
    { "symbol": "+", "name": "add", "function": "add()" },
    { "symbol": "-", "name": "subtract", "function": "subtract()" },
    { "symbol": "*", "name": "multiply", "function": "multiply()" },
    { "symbol": "/", "name": "divide", "function": "divide()" }
];

I've tried taking the quotation marks off the function names, but it turns out that JavaScript object values must contain strings.

I could do something like this

ng-click="{{ op.name === 'add' ? add() : op.name === 'subtract' ? subtract()
: op.name === 'multiply' ? multiply() : op.name === 'divide' ? divide() : multiply()}}"

But that seems like a terrible practice. Is there any way I can improve this, so I can call a function based on the operation?

Can you not assign the actual function to op.function rather some string expression? — New Dev
– New Dev, Commented Sep 17, 2015 at 18:11
Create single function with switch statement for each symbol, assign that function to ng-click (without any symbol). Finally to make it work you'd have to create another variable called op_symbol, or something like that and use it in your method. Plus I'd recommend reading about bindToController/controllerAs syntax. That drops using $scope in controller because you are able to assign vars, functions to this of controller's function - a lot easier to test such controller. — kornicameister
– kornicameister, Commented Sep 17, 2015 at 18:13

New Dev · Accepted Answer · 2015-09-17 18:17:01Z

4

The best approach is to assign the actual function, rather than a string expression of function invocation, to each op:

function add(){
  // whatever you do now
}

// same for other functions
function subtract(){}
function multiply(){}
function divide(){}

$scope.operations = [
    { "symbol": "+", "name": "add", "function": add },
    { "symbol": "-", "name": "subtract", "function": subtract },
    { "symbol": "*", "name": "multiply", "function": multiply },
    { "symbol": "/", "name": "divide", "function": divide }
];

And ng-click becomes:

<button ng-repeat="op in operations"  
        ng-click="op.function()"> 
  {{ op.symbol }}
</button>

answered Sep 17, 2015 at 18:17

New Dev

49.8k12 gold badges99 silver badges141 bronze badges

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

1 Comment

m59 Over a year ago

Beat me to the answer by 1 second lol. Here's a demo, though. jsbin.com/fiveduxeye/2/edit?html,js,output

Abdullah Rasheed · Accepted Answer · 2015-09-17 18:33:37Z

1

You could possibly reorganize your code this way. You controller you would define your functions add to the $scope object.

var add = function() {
 //code here
 }    

var subtract = function() {
 //coder her
 }     
$scope.operations= [
    { "name" : "add", "func" : add},
    { "name" : "subtract", "func" : subtract},
    ]

In the html you would do this reference them this way

  <div class="col-md-3">
  <button ng-repeat="op in operations" ng-click="op.func()"> {{ op.symbol }}
  </button>
  </div>

edited Sep 17, 2015 at 18:33

answered Sep 17, 2015 at 18:21

Abdullah Rasheed

3,7624 gold badges35 silver badges51 bronze badges

3 Comments

New Dev Over a year ago

To nitpick, there is no need to set the functions themselves on the $scope

Richard Hamilton Over a year ago

Thanks! I had tried the scope thing, but forgot to invoke the functions in ng-click. I had op.function instead of op.function()

Abdullah Rasheed Over a year ago

@NewDev you are right. I just typed it up real quick. Thanks for the correction.

Praveen Prasannan · Accepted Answer · 2015-09-17 18:13:19Z

0

$scope.operations = [
    { "symbol": "+", "name": "add"},
    { "symbol": "-", "name": "subtract"},
    { "symbol": "*", "name": "multiply"},
    { "symbol": "/", "name": "divide"}
];

<div class="col-md-3">
  <button ng-repeat="op in operations" name="btn{{ op.name }}"
          value="{{ op.symbol }}" class="operationbutton" 
          ng-click="op.Operationfunction(op.name)"> {{ op.symbol }}
  </button>
</div>

$scope.Operationfunction = function(operation){
switch(operation)
 case 'add':
  add();
  break;
 case 'multiply':
  multiply();
  break;
....
};

answered Sep 17, 2015 at 18:13

Praveen Prasannan

7,15310 gold badges53 silver badges71 bronze badges

Collectives™ on Stack Overflow

ng-click - Using functions for property values

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related