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

I am facing difficulties retrieving the JSON object returned from the Express GET route in Angular

After setting up an express route, the following JSON is returned: [{"_id":"573da7305af4c74002790733","postcode":"nr22ry","firstlineofaddress":"20 high house avenue","tenancynumber":"12454663","role":"operative","association":"company","hash":"b6ba35492f3 ...

javascriptangularjsjsonexpress

Issue with transforming rotation in Quirks mode

Currently, I'm developing a website in quirks mode which does not allow the use of . In my project, I am facing an issue where CSS3 translate image is not working in IE10 and 11, although it works fine in IE9 due to the limitations mentioned above. Is ...

cssdoctypecss-transformsquirks-mode

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

Instructions for removing a class using the onclick event in JavaScript

Is there a way to make it so that pressing a button will display a specific class, and if another button is pressed, the previous class is removed and a new one is shown? Thank you for your assistance. function myFunction() { document.getElementById ...

javascriptcss

Tips for creating a mandatory textarea input field

It's pretty straightforward - I have a textarea that is set to required, but it only alerts the user if you actually click inside the text area. If you try to submit without clicking inside, it won't prompt the alert. Take a look at this Fiddle ...

javascriptjqueryhtml

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...

javascriptcssreactjsmaterial-uimakestyles

SASS: incorporating loops within CSS properties

Is there a way to generate multiple values for a single property in CSS? background-image: radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, transparent 10%), radial-gradient(circle, $primary 10%, tr ...

csssass

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

What alternative methods can be utilized to refresh my Angular page without resorting to using location.reload()?

When it comes to this question, there appear to be two possible solutions: $scope.cancel = -> location.reload() or: $scope.cancel = -> $route.reload() The first option works effectively, however, it involves a full GET reques ...

angularjscoffeescript

The menu shifts position or overlaps next to the current active menu option

It would be helpful to take a look at the URL provided (http://ymm.valse.com.my/) in order to understand my question better. Upon clicking on any menu item, I noticed that the menu next to the active tab overlaps. I believe the issue lies in the width pro ...

jqueryhtmlcss

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

In my project, I have implemented p-calendar for selecting dates and times. I have set [minDate]="dateTime" so that it considers the current date and time if I click on Today button. However, I would like the default time to be 00:00 when I click ...

htmlangulartypescriptprimeng

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

Ways to assign a value to an input element in AngularJS without impacting its ngModel

JAVASCRIPT: .directive('search', [function () { return { restrict: 'A', link: function (scope, element, attrs) { attrs.$set('placeholder', 'Word...'); console.log(attrs); ...

javascriptangularjs

Can the state and city be filled in automatically when the zip code is entered?

I have a form where users can enter their zip code, and based on that input, the corresponding city and state will automatically populate. These three fields are positioned next to each other within the same form. Here is an example of my form: $(' ...

javascriptjqueryhtmltwitter-bootstrapclosest

AngularJS: Creating a unique directive for verifying the availability of a username - no duplicates allowed

I have a registration form that includes a username textbox. I would like to implement a custom directive that will check if the entered username already exists in the database. Here is the api implementation: /*get the unique username*/ $app->get(&ap ...

htmlangularjs

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

javascriptjqueryhtmlcss

Every time I attempt to utilize pdf.js, I encounter a Cross-Origin Request block

When attempting to read a local PDF file using pdf.js, I included the following script tag: <script src="https://cdn.jsdelivr.net/npm/pdfjs/build/pdf.min.js"> </script> To check if it was working, I added a simple console.log: ...

htmlpdf.js

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

I require assistance. This situation is absolutely absurd. Currently, I am utilizing Komodo IDE version 7.1.2 and Firefox version 15.0.1. The HTML5 file that I created looks like this: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

csshtmlfirefoxstylesheet

Managing the file order within subdirectories for Rails assets

Utilizing rails to power a primarily single page application, I am incorporating angular as well. Within my assets/javascripts directory, I have organized folders for controllers, directives, filters, routes, services, and more. Certain elements, such as ...

ruby-on-railsangularjsasset-pipeline