Я лечу 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)
но не знаю, как это сделать.
Вы можете использовать оператор 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>
Я бы сделал следующее
В контроллере:
$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.
Вдохновленный этим SO-ответом: как вызвать и выполнить оператор из строки?
ng
.
$("#output")
вернется?