CODEWITHSUNDEEP
javascriptangularjshtml
Xameer
Xameer

Reputation: 31237

Unable to bind expressions with input values

I was learning AngularJS. To practically fiddle with it, I was trying to create a basic calculator which read values from input box, does basic calculation and give output.

Here it is:

<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>

The values doesn't seem to be automatically getting calculated. Can someone guide?

Upvotes: 0

Views: 76

Answers (1)

fbid
fbid

Reputation: 1570

You misused the angular ng-model variables evaluation.

For example for the Sum you just need to write

{{ input1 + input2 }}

This is the new working code:

<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>

Upvotes: 1

Related Questions