Unable to bind expressions with input values

Question

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?

fbid · Accepted Answer · 2015-11-28 17:10:09Z

1

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>

answered Nov 28, 2015 at 17:10

fbid

1,5702 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mr.X Over a year ago

Thanks @fbid - now it's working perfect. Btw, what does (Property.input1|number) mean? I saw that syntax somewhere but don't know the use.

fbid Over a year ago

The " | number " is an angular filter used to format the value. You can find more info here: docs.angularjs.org/api/ng/filter/number

fbid Over a year ago

As for the Property.input1, you are referring to a input1 property on a Property Object. In order to use that notation you have to assign ng-model="Property.input1" instead of ng-model="input1" and then something like: {{ (Property.input1 / Property.input2) | number:2 }}

Collectives™ on Stack Overflow

Unable to bind expressions with input values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related