transferring the information through the $scope parameter

After retrieving data from my web service, I am storing it in my scope variable like this:

then(function (Tlist) {
                    $scope.Tlist=Tlist.data;
                })

I then display this data in a table, where I can select rows using checkboxes:

                    <td>
                        <input type="checkbox" ng-checked="checkall" ng-model="Ldata.checked" data-ng-click="calculateTotal(Ldata)" />
                    </td>

In the "calculateTotal(Ldata)" function, I need to store the value of (Ldata.amount) in another $scope variable.

This is what the condition inside the function looks like:

        if (Ldata.checked) {
            $scope.total += Number(Ldata.amount);
            console.log(Ldata.amount);
            console.log(Number($scope.total));
        }

However, when I check on

console.log(Number($scope.total));

the result shows as NaN. But on the line above and on the line with console.log(Ldata.amount);, the result appears as 1400. This discrepancy has me puzzled as to why I can't transfer data from one variable to another.

Answer №1

It seems like you are encountering the NaN error due to the fact that the variable $scope.total is currently undefined. In order to properly utilize the += operator, it's important to remember two key points:

  • The expression a += b is essentially a shorthand for a = a + b
  • Performing any mathematical operation involving a number and the value of undefined will result in a return value of NaN

To resolve this issue, simply initialize the value of $scope.total - one approach is to set it to zero at the start of your controller definition by using $scope.total = 0;.

Answer №2

It is recommended to use parseInt instead of Number

 console.log(parseInt($scope.total));

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

Utilizing $index in AngularJS while iterating through ng-repeat items

Here is an example of an unordered list: <ul class="dropdown-menu inner" role="menu"> <li ng-repeat="availableAlphaName in availableAlphaNames" data-original-index="0" data-optgroup="1" class=""> <a tabindex="0" class="opt " st ...

Extracting text from an array within Meteor

I am currently utilizing Meteor along with the ajduke:bootstrap-tagsinput plugin for managing tags on my platform. Check out the ajduke:bootstrap-tagsinput example page here For inserting tags as arrays, I am using the True Multiple Value feature mention ...

HTML and Javascript Form Integration for Sage Pay Purchase Button

Currently, I am working on a project that includes online payment options via PayPal and Google Wallet, with a "buy now" button. Now, my next step is to incorporate the Sage Pay "buy now" button onto the website using HTML and JavaScript. Although I have ...

Having two ng-click events and two distinct classes in an ng-repeat based on the selected option

There are two buttons in my code that should remove a div within an ng-repeat loop. Depending on which button is clicked, a custom CSS class should be added to the effect. The CSS changes based on the option selected. When I click on a button, either &apo ...

`Incorporate concurrent network requests in React for improved performance`

I am looking to fetch time-series data from a rest service, and currently my implementation looks like this async function getTimeSeriesQuery(i) { // Demonstrating the usage of gql appollo.query(getChunkQueryOptions(i)) } var promises = [] for(var i ...

Pair of elements connecting in Vuejs

What is the best way to efficiently organize data and communication between two Vue.js components? Here's an example scenario: 1) I have a component item(v-for="item in items) a {{item.name}} 2) And then the second component card(v-for="item in it ...

What is the process for importing specific modules from jQuery?

When working with webpack or browserify, what is the specific procedure required to import only the essential modules from jQuery as mentioned here? import {core, dimensions} from 'jquery' Unfortunately, this approach does not seem to be effect ...

The message from Vee-validate indicates that the validator 'required_if' does not exist within the system

I'm currently implementing vee-validate version 3 with Vue 2.7 in my project. Specifically, this is the entry in my package.json file for vee-validate: "vee-validate": "^3.4.5", My issue lies with getting the required_if rule to f ...

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

The resizing of iframes in Javascript is malfunctioning when it comes to cross-domain functionality

I have implemented a script to dynamically resize iframe height and width based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newheight=docume ...

What is the best way to retrieve form values on the server in nextJs?

I'm facing an issue with passing form data to my API endpoint in nextJS. I have set up the form using Formik and Yup for validation. Oddly, when I check the console on the client side, I can see the user input values just fine, but on the server side, ...

Create a new function that triggers an event when ng-show is used

As someone who is not an expert in Angular, I am trying to implement a functionality similar to "like/dislike". When viewing an article, you have the option to click on the "like" button. If you have already liked the article, the "like" button is hidden a ...

I am leveraging AngularJS to display a modal window with Bootstrap and Spring servlet integration

In my project, I am utilizing AngularJS to display multiple pages. One of these pages contains a smart-table where I showcase the details of "users". When I wish to edit one of the users, I aim to display the edit page as a popup window. Below is an excer ...

Creating a personalized control or widget with Angular

I would like to develop a custom control or widget using Angular. I am familiar with creating forms using basic controls like textboxes and buttons using Angular-Formly. Could you please assist me in achieving this? For instance, if I wish to add a Slide ...

Leverage Vue.js to utilize dropdown selected data

I need help with populating additional form elements based on the selection of a record from a dropdown menu that contains response data obtained through an axios request. <multiselect v-model="order.orderJCname" id="orderJCname" name="orderJCname" :op ...

Error: The object does not have a method called 'to top scroller' and it is causing an uncaught type error

A plugin was obtained from the following link: http://www.jqueryscript.net/other/jQuery-Plugin-For-Smooth-Scroll-To-Top-Bottom-scrollToTop.html.i and the code was attached below in the index.html file. Several jQuery plugins were attempted, but none work ...

One module triggers nodeMailer to send an email, while the other does not request it

My website needs to send two different types of emails: One type is a randomly generated password sent to a user who requests it (from the PayAsYouLike module). The other type is a 'get-in-touch' form that sends the email to my personal account ...

The object does not have a method query in ngResource

Having trouble with ngResource and receiving this error message: Error: Object # has no method 'query' I've tried to simplify my code based on the available documentation and forum posts, but I just can't seem to make it work. Below ...

Angular Bootstrap Popover will now automatically hide after a short period of time due to the removal of the tt_isOpen variable in ui-bootstrap-tpls-0

I recently attempted to implement the ingenious directive created by runTarm for managing angular-bootstrap-popover-hide-after-few-seconds. While using ui-bootstrap 0.11.0.js presented no issues, transitioning to ui-bootstrap-0.12.0 proved problematic as ...

Loop through the API URLs for AngularJS

$http({method: 'GET', url: '/xxx/xxx/xas'}).success(function(data) { $scope.website = data.websites; }); $http({method: 'GET',url: '/xx/xasxxx?websiteId='+$scope.website.websiteId}).success(function( ...