Click here to Skip to main content
14,241,167 members

Addition of Two Numbers in AngularJS

Rate this:
4.60 (3 votes)
Please Sign up or sign in to vote.
4.60 (3 votes)
24 Feb 2015CPOL
In this blog, we will see how to add two numbers from TextBox and show the result in AngularJS.

AngularJS

Recently, I have started learning AngularJS. AngularJS is a JavaScript Framework, which helps you to declare more HTML Tag Attributes with very powerful functionality.

Let’s Code Something

The first thing, which I tried to do, is to add two numbers and show the result in a TextBox. I coded like below…

<div ng-app="">
    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <p>Sum: {{ a + b }}</p>
</div>

Couple of Notes

  • The ng-model directive binds the value of the input field to the application variable name. So, the variable "a" will contain first TextBox Value and "b" will contain second TextBox value.
  • {{ expression }} is used to dynamically bind the result of the expression. Thus, while typing on the TextBoxes, this place will populate with the result of the expression, which is our expected summation.

Alright, Let’s See What Happened Next

The following screenshot would tell you what happened after that.

Sum of Two Numbers using TextBoxes

Sum of Two Numbers using TextBoxes

It is actually not adding, but concatenating the numbers. Why this happened? That is because the values inside the TextBoxes are always string. They are not numbers. Thus, “+” operator would help them concatenate.

Looking for Solutions !!!

Now, I researched and found two solutions.

Solution 1 – Using Double Negation

Very beautiful hack. Code as…

<div ng-app="">
    <h3>Using Double Negation</h3>

    <p>First Number:
        <input type="text" ng-model="a" />
    </p>
    <p>Second Number:
        <input type="text" ng-model="b" />
    </p>
    <p>Sum: {{ a -- b }}</p>
</div>

Solution 2 – Using HTML5 Input Type Number

This is the most preferable way of achieving this task as it uses HTML5 Input Type Number. So, when we use this Number Type, then “+” operator will work because the values are numbers by default.

<div ng-app="">
    <h3>Using Input Type Number</h3>

    <p>First Number:
        <input type="number" ng-model="c" />
    </p>
    <p>Second Number:
        <input type="number" ng-model="d" />
    </p>
    <p>Sum: {{ c + d }}</p>
</div>

Sum of Two Numbers in AngularJS

Sum of Two Numbers in AngularJS

Demo

Going Forward

I hope you liked the blog. Thanks for reading. As I progress and find more interesting stuff, I will share on my future blog posts. Happy coding. :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles


jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
  7. </

Comments and Discussions

 
Questionbrowser compatibility Pin
marc borgers3-Mar-15 9:46
membermarc borgers3-Mar-15 9:46 
AnswerRe: browser compatibility Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-Mar-15 20:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-Mar-15 20:53 
Questiondouble negation Pin
spring197526-Feb-15 8:54
memberspring197526-Feb-15 8:54 
AnswerRe: double negation Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Feb-15 20:10
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Feb-15 20:10 
AnswerRe: double negation Pin
Furqan Ahmed27-Feb-15 1:44
memberFurqan Ahmed27-Feb-15 1:44 
GeneralRe: double negation Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Feb-15 3:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Feb-15 3:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 24 Feb 2015

Stats

27.2K views
2 bookmarked