Calculate the Cumulative Total of a Column in Angular

Struggling to calculate the total of the amounts in the 3rd column. Any tips on how to achieve this?

<body ng-app="Test">
  <section style="margin-top:80px">
    <div ng-controller="TestController as test" >
      <table class="table">
        <tr>
          <th>Name</th>
          <th>Number</th>
          <th>Amount</th>
          <th>Reduced Amount</th>
        </tr>

        <tr ng-repeat="x in test.approve">
          <td> {{ x.name }} </td>
          <td> <input class="qty form-control" type="number" ng-model="x.number" ng-change="sumByColumn3()" min="0" restrict-to="[0-9]"/> </td>
          <td> <span ng-model="x.amount" ng-change="sumByColumn()">{{ x.number*x.amount }}</span> </td>
          <td> <input class="qty form-control" type="number" ng-model="x.reducedAmount" ng-change="sumByColumn2()" min="0" restrict-to="[0-9]"/> </td>
        </tr>
        <tr>
          <td style="color:red;">Totals displayed here</td>
          <td>{{ test.approve | sumByColumn3: 'number' }}</td>
          <td>{{ test.approve | sumByColumn: 'amount' }}</td>
          <td>{{ test.approve | sumByColumn2: 'reducedAmount' }}</td>
        </tr>
      </table>

    </div>
  </section>


</body>

Check out the complete code here

Answer №1

Within the 3rd column of the HTML, you can find:

<td> <span ng-model="x.amount" ng-change="sumByColumn()">{{ x.number*x.amount }}</span> </td>

This indicates a multiplication:

x.number * x.amount

However, an essential component is missing here:

.filter('sumByColumn', function () {
      return function (collection, column) {
        var total = 0;

        collection.forEach(function (item) {
          total += parseInt(item[column]);
        });

        return total;
      };
    })

To ensure accuracy, it seems that adding this multiplication will provide the correct total:

parseInt(item[column]*item.number);

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 can I obtain the attribute to insert it into my src? I am not very familiar with this process and would appreciate some

I keep receiving the result "undefined": Here is my JavaScript code: document.getElementById("myImg").src = "hackanm"+x+".gif"; var x = document.getElementsByTagName("img")[0].getAttribute("data"); This is my HTML code: <img data="WhatIWantToAdd" id ...

"The server responded with a 405 error message indicating that the requested method

I have been working on a registration form project using HTML, JS, NodeJS, and SQLite. However, I am encountering an issue with the fetch function when trying to post the inputted information into the database. I keep receiving a POST 405 (Method Not Allo ...

Retrieve the URL of the previously visited webpage using Javascript

Is there a way to retrieve the URL of the last visited page using JavaScript? I want to be able to track which product the user viewed most recently. I have attempted the following code: var x = document.referrer; document.getElementById("demo").innerHTML ...

Conflicts with FullCalendar - Dealing with Popovers and Over

I am currently using FullCalendar v6 with the resourceTimeGridDay feature. Within the 'eventDidMount' event render hook, I have implemented a JS function to display popovers on each event for showing event details. The popover is set to appear o ...

There seems to be a problem retrieving the JSON file

My JavaScript file is designed to fetch a JSON file and execute a function if successful. If there's an error, it should display an alert window with the message "error". However, despite checking the syntax, I keep receiving an error alert every time ...

What is the best way to build a Div structure using a JavaScript Array?

I am currently attempting to create a simple div construct based on a JavaScript array. However, my current approach only displays the last group/element of the array. What adjustments need to be made in order to generate a repeating div construct for each ...

Customize the element of the root node of a MUI component using the styled()

I am trying to implement the "component" prop with a MUI component (such as ListItem) using the styled() API. However, I am facing an issue where it says that "component" is not a valid prop. Can someone guide me on how to correctly achieve this? I have se ...

Transforming JSON data into a Thrift Object using Node.js

My thrift file structure is as follows: union D{ 1: string s; } struct B{ 1: required D d; } struct C{ 1: required D d; } union A{ 1: B b; 2: C c; } service Test { void store(1: A a) } Upon parsing a string, I obtained the following JSON object: var ...

The direction of the drop-down changes based on the available space

I'm new to programming and could really use your assistance. I'm having a problem with the positioning of my drop down sub-menus. Specifically, I have a simple drop down in my header that is too close to the window border when certain permission ...

Issues with pop-up windows on YII2 gridview

I am currently developing a web application using the Yii2 framework for my company to efficiently manage their storage. I have incorporated various plugins from kartik-v to enhance the functionality of the application. However, I am facing an issue with i ...

Using NodeJs to Render HTML Templates and Implement Logic on the Server Side

Hello, I am currently working on developing a widget module for my Angular 1 based UI project. This widget is meant to display real-time information. My design involves sending an HTML view to the client from the Node server (potentially using Express.js) ...

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

As a newcomer to AngularJS, I am facing an issue while trying to add a controller to my website. Strangely, the other two controllers are functioning perfectly fine, but this particular one is not being recognized. Here is my app.js file: var app = angul ...

Displaying separate items onto a webpage based on their unique identifiers

Currently, I am in the process of developing a JavaScript web application that retrieves input from a user (specifically the name of a music artist) and then produces a list of related artists along with their most popular songs, all thanks to information ...

Providing inputs to a JavaScript function, yet the function fails to execute properly

My JavaScript code detects the useragent for Android, iPhone, or iPod and loads specific JavaScript files accordingly. The code functions perfectly, but I noticed that having two 'createScript' functions with different names performing the same t ...

Having trouble connecting with Node.js and Express; encountering ERR_CONNECTION_REFUSED

I tried following this basic tutorial: After generating the files as instructed, I ran through all the steps but encountered an issue. Regardless of the browser I used, I kept getting "Unable to connect" in Firefox and "This webpage is not available ... E ...

Leveraging the power of React JS to access settings from an external configuration file

Issue : I am just starting with React JS and I am trying to figure out how to fetch environment configurations from an external property file. This is particularly important for one of my clients who needs the flexibility to alter environment files on the ...

Exploring AngularJS: Understanding the Resource Factory and Callback Functions

As a newcomer to Angular, I'm facing some challenges when it comes to managing data with $resource in a factory. I am transitioning from using $http requests to $resources in my factory. Initially, my code looked like this (simplified version): .fac ...

What do you call this technique, and how can I replicate it? (Adjusting text)

Have you noticed the cool feature on ? It automatically changes the text midway through the page (Sketch is made for insert changing text here like you) after some time. I'm curious about how they achieved that and what it's called. I'm att ...

Reset input value when adding or removing inputs dynamically

Currently, I have an input element that has the capability to clear its value when a button is clicked. Additionally, this input can dynamically add or remove input elements. However, I am facing an issue where after adding an input element, the clear butt ...

Retrieve information using JavaScript and save it within a PostgreSQL Database table

I have received data from a device in HEX format as shown below: <Buffer 00 cc> My goal is to convert this into TEXT format and store the value in a PostgreSQL database. However, I am encountering an error message while trying to process it for dat ...