AngularJS: A Step-By-Step Guide to Adding Two Values

Currently, I am utilizing the MEAN stack for my application with AngularJS as the front-end. I have two tables in which I obtained total sum values like 124.10 in the "conversion rate" column. Now, I am looking to calculate the total sum of the "conversion rate" values by adding them together, such as 124.10 + 124.10 answer = 248.20... View my Plunker here.

  • With two tables present, my goal is to compute the total sum of the "conversion rate" values in both tables.

  • For instance: the first table has a conversion rate of 124.10, and the second table also has a conversion rate of 124.10. By adding these two values together in a third table, the answer should be 248.20.

  • I have provided a reference in the form of a Plunker here. Any assistance in solving this issue would be greatly appreciated.

My Controller:-

  .filter('sumOfValue', function () {
    return function (data, key) {
        debugger;
        if (angular.isUndefined(data) && angular.isUndefined(key))
            return 0;        
        var sum = 0;

        angular.forEach(data,function(v,k){
            sum = sum + parseFloat(v[key]);
        });        
        return sum.toFixed(2);
    }
})

My Data:-

$scope.sryarndebitnote = [
{
"_id": "57ac1b6d82e1c5940ac3c730",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-11T06:30:05.118Z",
"shipment_id": "57ac19b982e1c5940ac3c72f",
"conversion_rate": "62.04",
"invoice_value_fob_currency": "Rs",
"invoice_value_fob": "300.231",
"invoice_quantity_unit": "KG",
"invoice_quantity": "37",
"invoice_date": "2016-08-17",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},

{
"_id": "57b5af69df0475401f644b2e",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 0,
"created": "2016-08-18T12:51:53.671Z",
"shipment_id": "57b5af5bdf0475401f644b2d",
"conversion_rate": "62.06",
"exclusive": true,
"invoice_value_fob": "400.343",
"invoice_quantity": "97",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},]

My Html:-

<tr ng-repeat="mani in resultValue=(sryarndebitnote)"> 
     <td >{{$index + 1}}</td>
       <td >{{(resultValue | sumOfValue:'conversion_rate' * 1) + (resultValue | sumOfValue:'conversion_rate' *1)}}</td>
         </tr>
     <tr>
        <td>sum</td>
            <td>B = {{resultValue | sumOfValue:'conversion_rate'}}</td>

         </tr>
  • The values in the third table should be calculated by adding A and B, resulting in a final total sum for C, where A + B equals 248.20. Therefore, the total sum for C value should be 496.40.

  • The total sum for C value should be 496.40.

Answer №1

Modify the following:

<td>{{(resultValue | sumOfValue:'conversion_rate' * 1) + (resultValue | sumOfValue:'conversion_rate' *1)}}</td>

To this:

<td>{{((resultValue | sumOfValue:'conversion_rate')*1) + ((resultValue | sumOfValue:'conversion_rate' )*1)}}</td>

The issue lies in the placement of parentheses.

Answer №2

{{(resultValue | sumOfValue:'conversion_rate' * 1) + (resultValue | sumOfValue:'conversion_rate' *1)}}

It is advised against using tricks like this to force integer summation, especially in sensitive applications.

That said; To ensure the result from the filter is treated as an integer, you can do:

   {{(resultValue | sumOfValue:'conversion_rate')*1 + (resultValue | sumOfValue:'conversion_rate')*1}}

However, a more robust approach should be considered in this scenario. Even using the parseInt function in your controller can achieve the desired outcome.

For more information:

How to parseInt in Angular.js

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I disable scrolling while the animation is running in CSS?

Is there a way to disable scrolling while animating in CSS without using overflow:hidden on the body tag? ...

In Angular, the object may be null

click here for image Encountering an error message stating that Object is possibly 'null' when utilizing querySelector and addEventListener in Angular. ...

Tips for submitting a form using javascript while preventing the default action

Looking for a way to submit a form in Javascript and prevent the default action? Let's explore how you can achieve this. Initially, my HTML form with the ID "contact_form" had an input element like so: <input id="contact_send_msg" type="submit" val ...

Pausing JavaScript Execution Until the Completion of an Ajax Call

As I edit values in a form fetched from the database via AJAX, clicking an element opens a modal box. The details are then fetched from the server and placed in the appropriate form elements. The data contains a pin code, and I need to retrieve all the ar ...

How can I display pure HTML in a Pyramid view?

I am completely new to Pyramid (and relatively inexperienced with web frameworks in general). My goal is to reach a point where I can retrieve raw HTML from a view in order to format data fetched from my mongoDB database. The __init__.py in my Pyramid pr ...

What impact will splitting a single file into multiple files have on the overall performance of the website?

Imagine having an index.php file that includes multiple other files: Contents of index.php --------------------------- include('header.php'); include('footer.php'); --------------------------- Contents of header.php ------------------ ...

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

Textarea generated on-the-fly without any assigned value

My goal is to enable users to edit the text within a paragraph on a website. I am attempting to replace the <p> tags with <textarea> tags using the .replaceWith() function. However, when I try to retrieve the value of the textarea, it comes bac ...

Excess spacing in image on top of CSS background overlay

While playing around with text scrolling over a fixed background image (similar to parallax scrolling but with no movement in the background), I encountered an issue. There seems to be a small margin or padding (around 5-10px) between the bottom of the upp ...

Apps created with PhoneGap will maintain the original sizing of web pages and not automatically resize for display on Android devices

After successfully porting my web-based tool to Android using PhoneGap from my Github repository, I encountered an issue with the display on Android devices. The app loads up too big for the screen, forcing me to constantly scroll around to see and access ...

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

Sneak beneath another element with a div's sliding movement

I'm attempting to make an absolutely positioned div element (#slideout) slide underneath another div element .menu using CSS, if possible. Check out my code here. Currently, when the red tab is clicked, #slideout covers .menu, but I want it to hide ...

What techniques can I use to achieve a seamless transition using Javascript and CSS?

I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...

Update Angular ui-grid to automatically refresh checkboxes upon deletion

Suppose you have a user interface grid with two columns: columnDefs: [ { name: 'select', displayName: '', cellTemplate: '<input type="checkbox">' }, { field: 'name', displayName: 'Item Name' ...

"An easy way to dynamically update a select dropdown based on the data of the corresponding row in a table using jQuery

Having some trouble with dynamically populating form input fields in a table. The first row works fine, but when I change the select option in the second row, it affects the previous field instead of the current row: How can I ensure that changing the sel ...

What is the best way to make the Bootstrap navbar stay fixed at the top of the

I am currently experiencing an issue with the Bootstrap navbar while using version 5.0. Whenever the Bootstrap navbar expands, the content below it also moves down, which is not the desired behavior. I want the content to remain in place. I tried set ...

Floating CSS3 animations within HTML elements

I'm struggling to understand why the animated arrow on my website refuses to go behind the other elements. The animation code I've used for the arrow in CSS3 is as follows: -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -ms-an ...

Tips on using object fields as directive arguments in AngularJS

Is there a way for me to pass an object array to a directive and have it output specific fields that I specify at the location where I use the directive? Let's look at an example: //directive app.directive('MyDirective', function() { ret ...

Issue with AngularJS ng-bind-html and sanitize functionality not functioning properly in version 1.3.8

In my view, I have the following: <div contentEditable="true" ng-bind-html="message" style="clear:both;padding:10px;height:250px;font-family:arial,sans-serif;font-size:13px;resize:none;overflow-y:scroll;border:rgb(229,229,229) solid 1px;margin-bottom:3 ...

Tips for incorporating Bootstrap classes into a React project, setting the className attribute to an empty string

After setting up Bootstrap and Create-React-App using npm on my local machine, I proceeded to create a new React app. The first component I worked on was counter.jsx: import React, { Component } from 'react'; class Counter extends Component { ...