Angular JS - Instead of sum values are getting concatenated

Question

I'm new to AngularJS, just created a simple form in order to understand. I tried multiplying 2 input values, I'm good here, but when I use same code to sum those 2 input values it is getting concatenated instead of sum.

My code:

<div ng-app ng-init="fval = 1;sval = 2">
<div>
    First Value:
</div>
<div>
    <input type="text" ng-model="fval" />
</div>
<br />
<div>
    Second Value:
</div>
<div>
    <input type="text" ng-model="sval" />
</div>
<br />
<div>
    <label id="lblResult">{{fval * sval}}</label>
</div>

Here I have given hardcoded values for my inputs, initially we will get result as 6. Also when we change the inputs we will get correct result for multiplying 2 values.

I changed my code for addtion as below:

<label id="lblResult">{{fval + sval}}</label>

After running the application I got the correct value as 3, but when I change my input values I'm getting concatenated values. Like if I change my text box values, for firstTextBox = 12 & secondTextBox = 3, then I'm getting result value as '123'.

Hence, I'm landing with correct value when I run the application first time, but changing inputs on client side is concatenating.

Sorry for my English, since it is not my first language. Can anyone please help me where I'm going wrong.

Change type of input controls to number if you really want to do mathematical operation. — Hardik Vaghani
– Hardik Vaghani, Commented Jun 20, 2016 at 12:47
that's the way javascript works :) Multiplication is not available to strings then it tries to be smart and use the strings as numbers instead — Akshay Khandelwal
– Akshay Khandelwal, Commented Jun 20, 2016 at 12:48
It did work for multiplication since * is a purely mathematical operator. Because of that your string inputs are automatically parsed as number. Since + however is a mathematical, as well as the string concatination operator it works as string concatination when one of both arguments is of type string. — Aides
– Aides, Commented Jun 20, 2016 at 12:49
Note however that this is not a typical application of angular expression since you would normally do your logic inside your controller and then bind to that. — Aides
– Aides, Commented Jun 20, 2016 at 12:51
@NnN Another workaround could be {{fval * 1 + sval * 1}} because the manipulation by 1 will convert the string to number (Just FYI) — Alon Eitan
– Alon Eitan, Commented Jun 20, 2016 at 12:59

Dhananjaya Kuppu · Accepted Answer · 2016-06-20 12:47:14Z

3

Try Changing

<input type="text" ng-model="fval" />

To

<input type="number" ng-model="fval" />

answered Jun 20, 2016 at 12:47

Dhananjaya Kuppu

1,3329 silver badges10 bronze badges

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

1 Comment

NnN Over a year ago

Worked, Thank you!!

Ervis Trupja · Accepted Answer · 2016-06-20 12:54:43Z

1

That happens because the type of the ng-model is declared as text.

<input type="text" ng-model="fval" />
<input type="text" ng-model="sval" />

So when you add them using {{fval + sval}} you get a string since the sum of two string is the result of concationation of these two strings.
In order for them to work as expected you should replace them like below:

<input type="number" ng-model="fval" />
<input type="number" ng-model="sval" />

Hope this saves your time.

answered Jun 20, 2016 at 12:54

Ervis Trupja

2,8307 gold badges24 silver badges43 bronze badges

1 Comment

NnN Over a year ago

Thanks! this worked when I changed the input type. But can you please say, how it worked when the application runs first time, where I'm getting correct value in my label even though while compile time the model is string. I'm able to see my result value as 3 when I land first time.

Keugels · Accepted Answer · 2016-06-20 12:59:00Z

0

This is just a JavaScript thing. Your numbers are strings, and + is the concatenation operator. One way to solve this:

parseInt(fval) + parseInt(sval)

Edit: This is not allowed within Angular expressions (see below). Answer is valid for use in 'normal' JS code though.

edited Jun 20, 2016 at 12:59

answered Jun 20, 2016 at 12:52

Keugels

8507 silver badges15 bronze badges

4 Comments

Alon Eitan Over a year ago

Can you do that inside angularjs expression?

Muthukannan Kanniappan Over a year ago

You cannot do parseInt inside angular expression. stackoverflow.com/questions/26293769/…

Keugels Over a year ago

Thanks Muthukannan. I didn't know this (always trying to prevent any kind of logic within the HTML).

Alon Eitan Over a year ago

@Keugels I wrote a comment that I think that might work inside angularjs expression: {{fval * 1 + sval * 1}}

Collectives™ on Stack Overflow

Angular JS - Instead of sum values are getting concatenated

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related