What is the Method for Multiplying Two ng-module Values in AngularJS?

In my application, I am utilizing the MEAN stack with AngularJS for the front-end. I have a table that contains two values - 'Payment value' with commas and 'commission' without commas. How can I multiply these two values? For example: in a transaction where the payment value is 1,925.10 and the commission value is 3, the result would be 1,925.10*3 = 5775.3...

Another example: In a transaction where the payment value is 1,925.10 and the commission value is 5, the multiplication of these values will be 1,925.10*5 = 9625.5...

My HTML:

<td >{{mani.payment }}</td>

    <td >{{mani.commission}}</td>

        <td >{{(mani.payment) * (mani.commission)}}</td>

My Data:

  {
  "_id": "5816f4fad0be79f809519f98",
  "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
  },
  "__v": 0,
  "created": "2016-10-31T07:38:34.999Z",
  "remarks": "-",
  "commission": "3",
  "status": "pending",
  "amt": "4000",
  "cheque_currency": "Rs",
  "cheque_value": "300",
  "payment": "1,925.10",
  "debitnote_no_payment": "3",
  "supplier_name": "karikalan",
  "buyer_name": "Manidesigns"
},

{
"_id": "5816f4fad0be79f809519f98",
"user": {
  "_id": "57400c32bd07906c1308e2cf",
  "displayName": "mani selvam"
},
"__v": 0,
"created": "2016-10-31T07:38:34.999Z",
"remarks": "-",
 "commission": "5",
"status": "pending",
"amt": "2000",
"cheque_currency": "Rs",
"cheque_value": "300",
"payment": "1,925.10",
"debitnote_no_payment": "3",
"supplier_name": "karikalan",
"buyer_name": "Manidesigns"
},

I have created a Plunker for reference: Plunker

htmlcssangularjsmeanjs

Answer №1

To fix the issue in your plunker, all you need to do is update this line:

<td>{{(mani.payment) * (mani.commission)}}</td>

Replace it with:

<td>{{(mani.payment.replace(',','')) * (mani.commission.replace(',',''))}}</td>

This simple adjustment will resolve the problem.

Answer №2

It is recommended to adjust the format from '1,925.10' to 1925.10 when responding to the request.

1925.10 represents the true value, while '1,925.10' is just a different representation of it.

For more information on converting variables with commas into numbers, you can visit Make parseFloat convert variables with commas into numbers

function parseFloatIgnoreCommas(number) {
    var numberNoCommas = number.replace(/,/g, '');
    return parseFloat(numberNoCommas);
}

Answer №3

Ensure that the value passed for multiplication is a number and not a string. Please review your Plunker as I have made the necessary updates. Alternatively, pass the value as a number in your JSON.

http://plnkr.co/edit/3zFrSqDWvE5pr3jgKO91?p=preview

 <tr ng-repeat="mani in resultValue=(sryarndebitnote)"> 
        <td >{{$index + 1}}</td>
            <td >{{mani.amt}}</td>
            <td >{{mani.payment }}</td>
            <td >{{mani.commission}}</td>
             <td >{{(mani.payment) * (mani.commission)}}</td>

           </tr>
           <tr>
             <td>sum</td>
             <td>{{resultValue | sumOfValue:'amt'}}</td>
             <td>{{resultValue | sumOfValue:'payment'}}</td>
             <td></td>
             <td></td>
           </tr>

Or 

 $scope.sryarndebitnote = [
{
  "_id": "5816f4fad0be79f809519f98",
  "user": {
    "_id": "57400c32bd07906c1308e2cf",
    "displayName": "mani selvam"
  },
  "__v": 0,
  "created": "2016-10-31T07:38:34.999Z",
  "remarks": "-",
  "commission": 3,
  "status": "pending",
  "amt": 4000,
  "cheque_currency": "Rs",
  "cheque_value": 300,
  "payment": 1925.10, // Change to number
  "debitnote_no_payment": 3,
  "supplier_name": "karikalan",
  "buyer_name": "Manidesigns"
},
{
"_id": "5816f4fad0be79f809519f98",
"user": {
  "_id": "57400c32bd07906c1308e2cf",
  "displayName": "mani selvam"
},
"__v": 0,
"created": "2016-10-31T07:38:34.999Z",
"remarks": "-",
 "commission": 5,
"status": "pending",
"amt": 2000,
"cheque_currency": "Rs",
"cheque_value": 300,
"payment": 1925.10,
"debitnote_no_payment": 3,
"supplier_name": "karikalan",
"buyer_name": "Manidesigns"
}
   ];

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

Use Angular to update the text input value

I am currently working with a basic input that is showing a timestamp in milliseconds, which is stored on the scope. However, I am interested in having it display formatted time without needing to create a new variable. I am exploring a potential solutio ...

htmlangularjs

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

javascripthtmlcssnode.jsexpress

Using PHP's modulus operator, you can dynamically apply CSS classes to a grid of images based on alternating patterns

Exploring the use of modulus to dynamically apply a CSS class to images displayed in a grid under different scenarios: Situation 1 In this situation, the goal is to target and apply a CSS class to middle images marked with *. Since the number of images ...

phpcssmedia-queriesmodulus

Dynamic Website Layout Bootstrap 4 [ card designs and Tabs ]

Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...

htmlcssbootstrap-4

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Extending the href value using jQuery at the end

Can someone help me with this link: <a id="Link" href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2745425453424b4b524940674e0a4355464e4909494253">[email protected]</a>?subject=I-Drain Bestellung& ...

javascriptjqueryhtmlforms

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

I have a React component named "Login.js" that utilizes forms and renders the following:- return ( <div className="form-container"> <Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}&g ...

javascriptcssreactjsformscolors

Understanding the relationship between CSS height and line-height can help developers create more

Is there a way to use CSS to set the height of a box based on its own line-height or its parent's line-height? This feature would make it much simpler to create text areas that are a specific multiple of lines, for example, displaying exactly three l ...

css

"Is there a way to retrieve global variables within the asynchronous callback function of Google Autocomplete

Currently, I am engaged in an angular project that involves the utilization of the leaflet-google-places-autocomplete API alongside the leaflet framework. The main objective is to extract location data from the API and apply it in other sections of my com ...

angularjscallbackleafletasynccallbackgoogle-places-autocomplete

Tips on retaining the value of $index in ng-repeat and storing it within the array

I currently have a cart for shopping. The code for the "add to cart" function looks something like this (shortened): "add" : function(code) { codes.push({ "id" : code.id, "order" : "N/A", ...

javascriptangularjs

Align the items in the Bootstrap navbar to the right using float

Can someone provide guidance on how to float navbar items to the right instead of the left? I have tried using the floats and float-right classes, but it seems that pull-right is deprecated. Any help would be greatly appreciated. <header class="conta ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What are effective methods for testing HTML5 websites?

I'm currently working on a project to create a dynamic website using HTML5. The first page will prompt the user for specific inputs, and the following page will adjust accordingly based on these inputs. My main concern now is how to effectively test ...

javascriptunit-testinghtmltestingbrowser

"Use jQuery to toggle the slide effect for the first element of a

Below is the HTML code snippet: <div class="row header collapse"> Content 1 <i class="fas fa-chevron-circle-up" ></i> </div> <div class="instructions-container"> <div></di ...

javascripthtmljquerycss

Nested Property Binding in CallByName

I am looking to utilize CallByName in VBA to extract specific data from various webpages with differing html structures. In my scenario, I need to reference multiple parent nodes to access an element with or tags. Here is an example of the code: The eleme ...

htmlvbacallbyname

Struggling with establishing recognition of a factory within an Angular controller

I am currently facing an issue while trying to transfer data from one controller to another using a factory in Angular Seed. My problem lies in the fact that my factory is not being recognized in the project. Below is my snippet from app.js where I declare ...

javascriptangularjsangular-seed

Indication of a blank tab being displayed

I'm struggling to get my Angular directives working in my project. I've tried implementing a basic one, but for some reason it's not showing anything on the screen. Can anyone help me troubleshoot this issue? Here is my JS code: angular ...

javascriptangularjsangularjs-directive

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

Adjust the ZIndex on a div through interactive clicking

For my new project, I'm exploring a concept inspired by Windows 7. The idea is that when you double click on an icon, a window will open. If you keep double clicking on the same icon, multiple windows should appear. The challenge I'm facing is im ...

javascripthtmlcssz-index

Issue with Bootstrap 4 navbar z-index not functioning as expected

Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...

csstwitter-bootstrapnavbaroverlapbootstrap-4

Error encountered with the item properties in vue-simple-calendar 'classes'

For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expec ...

cssvue.jsnpmcalendar