Angular js eval js bind

Question

我正在学习Angular JS，目前我正在理解它能做什么，不能做什么。

我正在尝试做一个简单的计算器，它有两个数字和一个运算符作为输入。

我很难理解如何计算绑定上的运算符。这是我的代码：

​

<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>

​

我希望它类似于eval(number1 operator number2)，而不是number1 + number2，但是我不知道怎么做。

Answer 1

您可以使用if语句

<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

Answer 2

我将执行以下操作

在控制器中：

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

视图中：

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

这将使你的视图更清晰，没有任何多余的div。

受这个答案的启发：How to call and execute an operator from string?