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?