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>

而不是number1 + number2我希望它像eval(number1 operator 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?

绑定中的角度js eval

2 个答案: