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?