find total sum of elements outside ng-repeat loop

Question

find total sum of elements outside ng-repeat loop

I am currently working on a calculation for the total outside of an ng-repeat, which is influenced by ng-change within the ng-repeat.

Here is a preview of my table layout:

<table>
    <tr>
        <td>Total - the total is {{tot}}</td>
    </tr>

    <tr ng-repeat="obj in Array">
         <td>
            <input ng-change="getValue(obj.Cost);" ng-model="obj.Quantity" type="number">
         </td>
        <td>
            <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td> 
            <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
    </tr>
</table>

I am now in the process of calculating the overall total.

var total = 0;
$scope.getValue = function(Cost){
    total += parseInt(Cost);
    $scope.tot = total
}

However, I'm encountering some issues with this calculation. Can you provide guidance on how to rectify this?

javascript angularjs

Answer 1

Answer №1

Upon initial inspection, I have identified a couple of issues in your code.

To begin with

<span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>

Using ng-model on a span element is considered improper. Further information can be found in the official documentation.

Secondly

<input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">

You are attempting to assign the result of obj.Quantity * obj.ListPrice to obj.Cost within the ng-value attribute. This may require further clarification for better understanding.

It seems that you may be aiming for this implementation

<input type="number" 
       ng-init="obj.Cost = obj.Quantity * obj.ListPrice" 
       ng-value="obj.Cost" />

Answer 2

Upon initial inspection, I have identified a couple of issues in your code.

To begin with

<span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>

Using ng-model on a span element is considered improper. Further information can be found in the official documentation.

Secondly

<input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">

You are attempting to assign the result of obj.Quantity * obj.ListPrice to obj.Cost within the ng-value attribute. This may require further clarification for better understanding.

It seems that you may be aiming for this implementation

<input type="number" 
       ng-init="obj.Cost = obj.Quantity * obj.ListPrice" 
       ng-value="obj.Cost" />

Answer 3

Answer №2

It seems like your code is not functioning correctly due to the triggering of ng-change before it can calculate obj.Cost, resulting in the retrieval of the outdated value of Cost. To resolve this issue, you can implement the following approach:

$scope.getValue = function() {
  $scope.total = 0
  $scope.myArray.forEach(function(arr) {
    $scope.total += arr.Quantity * arr.ListPrice
  })
}

Incorporate the following input element:

<td>
  <input ng-change="getValue()" ng-model="obj.Quantity" type="number">
</td>

Check out the revised and functional code snippet below:

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.myArray = [{
    Quantity: "",
    ListPrice: 100
  }, {
    Quantity: "",
    ListPrice: 200
  }]

  var total = 0;
  $scope.getValue = function(obj) {
    $scope.total = 0
    $scope.myArray.forEach(function(arr) {
      $scope.total += arr.Quantity * arr.ListPrice
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">

    <table>
      <tr>
        <td>Total - total is {{total}}</td>
      </tr>

      <tr ng-repeat="obj in myArray">
        <td>
          <input ng-change="getValue(obj);" ng-model="obj.Quantity" type="number">
        </td>
        <td>
          <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td>
          <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
      </tr>
    </table>
  </div>

</body>

Answer 4

It seems like your code is not functioning correctly due to the triggering of ng-change before it can calculate obj.Cost, resulting in the retrieval of the outdated value of Cost. To resolve this issue, you can implement the following approach:

$scope.getValue = function() {
  $scope.total = 0
  $scope.myArray.forEach(function(arr) {
    $scope.total += arr.Quantity * arr.ListPrice
  })
}

Incorporate the following input element:

<td>
  <input ng-change="getValue()" ng-model="obj.Quantity" type="number">
</td>

Check out the revised and functional code snippet below:

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.myArray = [{
    Quantity: "",
    ListPrice: 100
  }, {
    Quantity: "",
    ListPrice: 200
  }]

  var total = 0;
  $scope.getValue = function(obj) {
    $scope.total = 0
    $scope.myArray.forEach(function(arr) {
      $scope.total += arr.Quantity * arr.ListPrice
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">

    <table>
      <tr>
        <td>Total - total is {{total}}</td>
      </tr>

      <tr ng-repeat="obj in myArray">
        <td>
          <input ng-change="getValue(obj);" ng-model="obj.Quantity" type="number">
        </td>
        <td>
          <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td>
          <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
      </tr>
    </table>
  </div>

</body>

Answer 5

Answer №3

To access the combined total outside of the repeating loop in AngularJS, you can follow this approach:

<span>Total is: {{total}}</span>    
<table>
    <tbody ng-init="total = 0">
    <tr ng-repeat="obj in Array">
         <td>
            <input ng-change="getValue(obj.Cost);" ng-model="obj.Quantity" type="number">
         </td>
        <td>
            <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td ng-init="$parent.total = $parent.total + (obj.Quantity * obj.ListPrice)"> 
            <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
    </tr>
</table>

The ng-init inside the tbody element helps in updating the 'total' variable dynamically outside of the main loop.

Answer 6

To access the combined total outside of the repeating loop in AngularJS, you can follow this approach:

<span>Total is: {{total}}</span>    
<table>
    <tbody ng-init="total = 0">
    <tr ng-repeat="obj in Array">
         <td>
            <input ng-change="getValue(obj.Cost);" ng-model="obj.Quantity" type="number">
         </td>
        <td>
            <span ng-model="obj.ListPrice">{{obj.ListPrice}}</span>
        </td>
        <td ng-init="$parent.total = $parent.total + (obj.Quantity * obj.ListPrice)"> 
            <input type="number" ng-value="obj.Cost = obj.Quantity * obj.ListPrice">
        </td>
    </tr>
</table>

The ng-init inside the tbody element helps in updating the 'total' variable dynamically outside of the main loop.

find total sum of elements outside ng-repeat loop

Answer №1

Answer №2

Answer №3

Similar questions

The filter function is functioning properly when used in the console, but is not working as intended within the

The data visualization tool Highchart is struggling to load

What is the method for conducting an Ajax request?

Every time I attempt to make a "post" request to the SailsJS server, I encounter a 403 CSRF Mismatch error

Adjusting the minimum value on a textfield with JQuery Validate plugin in real-time

Ways to transfer GET form information to Express?

Iterate through each row asynchronously, waiting for each one to complete before moving on to the

Raycasting intersections in Three.js

Show the selected checkbox options upon clicking the submit button

Better ways to conceal notifications as soon as a new one appears with Toastr

The error message "TypeError: scanner.js is undefined and property 'scan' cannot be read" is occurring

A different and more efficient way to address the issue at hand

When using VueJs, an error occurs when attempting to pass a dynamically generated array as a string, but there are no issues when the

Guide on utilizing the reduce method with objects

Unexpectedly, Ajax call is triggering additional callbacks

The last javascript file that was included has been overlooked

Is the "Illegal invocation" error popping up when using the POST method in AJAX?

What steps can be taken to customize the default keyboard shortcuts functionality in Swiper.js?

Attempting to integrate a complex Ruby operation (using each loop and iterator) into a JavaScript platform (such as Google Charts API) by creatively combining them in a non-conventional manner during the development phase

Seeking assistance with transmitting data to the server and retrieving it for use. I am looking to achieve this goal utilizing JavaScript with Node.js