Угловой JS Eval внутри привязки

0

Я лечу 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) но не знаю, как это сделать.

Теги:
data-binding

2 ответа

2

Вы можете использовать оператор 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>

код

  • 0
    Но идентификатор должен быть уникальным рядом со страницей. что $("#output") вернется?
0

Я бы сделал следующее

В контроллере:

$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-ответом: как вызвать и выполнить оператор из строки?

  • 0
    пока что кажется лучшей идеей, но я намеревался использовать только HTML и свойства ng .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню