Невозможно связать выражения с входными значениями

Question

Невозможно связать выражения с входными значениями

0

Я изучал AngularJS. Чтобы практически с этим поиграть, я пытался создать базовый калькулятор, который считывал значения из поля ввода, выполнял базовый расчет и выдавал результат.

Вот он:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app=''>
    
    <p>Enter first number: <input type="number" ng-model="input1"></p>
        <p>The number you entered is <mark ng-bind="input1"></mark></p>
    <p>Enter second number: <input type="number" ng-model="input2"></p>
        <p>The number you entered is <mark ng-bind="input2"></mark></p>

        <p>
            Subtraction: {{ (Property.input1|number) + (Property.input2|number) }}
        </p>

        <p>
            Sum: {{ (Property.input1|number) + (Property.input2|number) }}
        </p>
    
        <p>
            Product: {{ (Property.input1|number) * (Property.input2|number) }}
        </p>
        
        <p>
            Division: {{ (Property.input1|number) / (Property.input2|number) }}
        </p>
        
</div>

Значения, как представляется, автоматически не вычисляются. Может ли кто-нибудь руководить?

student 28 нояб. 2015, в 18:22

Источник

Теги:

javascript

html

angularjs

html5

1 ответ

Ещё вопросы

fbid · Accepted Answer · 2015-11-28T15-17-00.000Z

Вы неправильно использовали оценку переменных угловой ng-модели.

Например, для суммы вам просто нужно написать

{{input1 + input2}}

Это новый рабочий код:

<div data-ng-app=''>

    <p>Enter first number: <input type="number" ng-model="input1"></p>
        <p>The number you entered is <mark ng-bind="input1"></mark></p>
    <p>Enter second number: <input type="number" ng-model="input2"></p>
        <p>The number you entered is <mark ng-bind="input2"></mark></p>

        <p>
            Subtraction: {{ input1 - input2 }}
        </p>

        <p>
            Sum: {{ input1 + input2 }}
        </p>

        <p>
            Product: {{ input1 * input2 }}
        </p>

        <p>
            Division: {{ input1 / input2 }}
        </p>

</div>

Спасибо @fbid - теперь все работает отлично. Кстати, что означает (Property.input1|number) ? Я видел этот синтаксис где-то, но не знаю, как его использовать.
«| Число» - это угловой фильтр, используемый для форматирования значения. Вы можете найти больше информации здесь: docs.angularjs.org/api/ng/filter/number
Что касается Property.input1, вы ссылаетесь на свойство input1 объекта Property. Чтобы использовать эту нотацию, вы должны назначить ng-model="Property.input1" вместо ng-model="input1" а затем что-то вроде: {{ (Property.input1 / Property.input2) | number:2 }}