Angular js eval inside bind

Question

I'm learing Angular JS and I'm currently in the process of understanding what it does and what it does not.

I'm trying to do a simple calculator that has two numbers and an operator as input.

I'm having a hard time to understand how to evaluate the operator on the binding. This is my code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id='example' ng-app=''>
  <input ng-model='number1' type='number'>
  <select ng-model='operation' ng-options="op for op in ['+', '-', '/', '*']"></select>
  <input ng-model='number2' type='number'>
  <div id='output' ng-bind="number1 + number2"></div>
</div>

Instead of number1 + number2 I want it to be something like eval(number1 operator number2) but don't know how to do it.

Abdennacer Lachiheb · Accepted Answer · 2016-07-30 20:35:27Z

2

You can use the if statement

<input ng-model='number1' type='number'>
<select ng-model='operation' ng-options="op for op in ['+', '-', '/', '*']"></select>
<input ng-model='number2' type='number'>
<div ng-if="operation == '+'"><div id='output' ng-bind="number1 + number2"></div></div>
<div ng-if="operation == '-'"><div id='output' ng-bind="number1 - number2"></div></div>
<div ng-if="operation == '/'"><div id='output' ng-bind="number1 / number2"></div></div>
<div ng-if="operation == '*'"><div id='output' ng-bind="number1 * number2"></div></div>

code

edited Jul 30, 2016 at 20:35

answered Jul 30, 2016 at 20:28

Abdennacer Lachiheb

4,9689 gold badges35 silver badges66 bronze badges

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

1 Comment

Filipe Teixeira Over a year ago

But the id should be unique alongside the page. what $("#output") would return?

Community · Accepted Answer · 2017-05-23 12:25:30Z

0

I would do the following

In controller:

$scope.operators = {
    '+': function(a, b) { return a + b },
    '-': function(a, b) { return a - b },
    //...rest of the operators
};

in view:

<div id='output' ng-bind="operators[operation](number1, number2)"></div>

This is will keep your view cleaner without any redundant divs.

Inspired by this SO answer: How to call and execute an operator from string?

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Jul 30, 2016 at 20:44

avatsaev

931 silver badge7 bronze badges

1 Comment

Filipe Teixeira Over a year ago

seems like the best idea so far but my intention was to use only HTML and the ng properties.

Collectives™ on Stack Overflow

Angular js eval inside bind

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related