1

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.

NnN
  • 463
  • 2
  • 11
  • that's because they are strings and not numbers – Akshay Khandelwal Jun 20 '16 at 12:46
  • Thanks Akshay - It worked for multiplication, why not working for addition? – NnN Jun 20 '16 at 12:47
  • 1
    Change type of input controls to number if you really want to do mathematical operation. – Hardik Vaghani Jun 20 '16 at 12:47
  • 1
    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 Jun 20 '16 at 12:48
  • 1
    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 Jun 20 '16 at 12:49
  • 1
    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 Jun 20 '16 at 12:51
  • @AkshayKhandelwal - Thank you for your information! – NnN Jun 20 '16 at 12:53
  • @Aides - Thank you for your explanation, it is a very useful information for me. – NnN Jun 20 '16 at 12:54
  • 1
    @NnN Another workaround could be `{{fval * 1 + sval * 1}}` because the manipulation by 1 will convert the string to number (Just FYI) – Alon Eitan Jun 20 '16 at 12:59
  • @hva.narola - Thank you! I got confused on the base thing, why working for multiplication not for addition. Now I got enough info! – NnN Jun 20 '16 at 12:59

3 Answers3

3

Try Changing 

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

To

<input type="number" ng-model="fval" />
Dhananjaya Kuppu
  • 1,322
  • 9
  • 10
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.

etrupja
  • 2,710
  • 6
  • 22
  • 37
  • 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. – NnN Jun 20 '16 at 13:04
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.

Keugels
  • 790
  • 5
  • 15