AngularJS Dynamic sum of list

Question

I am using angularJS ontop of my application.

I have a basic example of a controller:

function OrderListCtrl($scope, $http) {
  $http.get('/static/angular/app/phones/van1.json').success(function(data) {
    $scope.van1 = data;
  });

  $http.get('/static/angular/app/phones/van2.json').success(function(data) {
    $scope.van2 = data;
  });

}

And a sample JSON entry

{
        "id": "3", 
        "custName": "Mrs Smith",
        "accountNumber": "416", 
        "orderNumber": "12348", 
        "orderWeight": "120.20"
},

My html looks like this:

<div id=1>
<h1>Van 1 - Total Weight = XXX </h1>
<ul class="sortdrag">
    <li ng-repeat="van1 in van1" id="[[ van1.id ]]">
      [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]]

    </li>
</ul>
</div>

Now, I want to get the total weight for every li item in the ul.

This WOULD be easy if the lists where static, however the lists are using jQuery-ui and I have multiple lists where the li items are dragged and dropped between each list. My question is, how can I have the XXX dynamically update to the value of all weights in each li in the ul, or more to the question can this even be done?

I dont really want to use an onDrop event as this will not work on the pre-populated lists, so ideally I would like to use code that takes its values from all van1.orderWeight values in the ul.

Any suggestions on the best way to approach this would be very much appreciated! And before anyone asks im using [[ and ]] as opposed to {{ and }} because I am using jinja2 templates.

UPDATE:

Ok to after reading the answer below have amended the original controller to:

function OrderListCtrl($scope, $http) {
  $http.get('/static/angular/app/phones/van1.json').success(function(data) {
    $scope.van1 = data;
    // This part is easy, calcuate the sum of all weights from the JSON data
    $scope.sumV1 = _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0);
  });

  $scope.getVan1Weight = function(){
    // here I try and write a function to calculate the dynamic weight
    // of a van, which will update when items get dropped in/out of the ul
     _.reduce(_.pluck($scope.van1, 'orderWeight'), function (m, w) {return m + w}, 0);
    }

And my template

<div id="app" ng-controller="OrderListCtrl">

<div id=1>
<h1>Van 1 - Total Weight = [[getVan1Weight()]]  
Starting Weight - [[sumV1]]</h1>
<ul class="sortdrag">
    <li ng-repeat="van1 in van1" id="[[ van1.id ]]">
      [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]]

    </li>
</ul>
</div>

Now im using the underscorejs libary to help perform the calculations, but I can only seem to get this to work using the initial data, and not to update when new orders are dragged in from another ul

Ganaraj · Accepted Answer · 2012-12-14 16:31:23Z

4

That is pretty each to achieve in Angular. You have to write a function in your controller that does the calculation for you and interpolate that function in your view. Something like

<div id=1>
<h1>Van 1 - Total Weight = [[getVanWeight()]] </h1>
<ul class="sortdrag">
    <li ng-repeat="van1 in vans" id="[[ van1.id ]]">
      [[van1.custName]] [[van1.accountNumber]] [[van1.orderWeight]]

    </li>
</ul>
</div>

Inside your controller you do :

$scope.getVanWeight = function(){
// write your logic for calculating van weight here.

}

answered Dec 14, 2012 at 16:31

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Crooksey Over a year ago

Hi @ganaraj, I have updated my original post with my new code, I still cant get this to work with new items getting dropped into my ul

Ganaraj Over a year ago

Can you create a plunkr or a fiddle with what you are trying to achieve? I could probably help you with correcting that code. Also dont do van1 in van1 ( you could do van in van1 or item in van1 ). Its misleading and probably will lead to a lot of confusion.

Crooksey Over a year ago

try plnkr.co/edit/x8EPgfk6kyHWRQTIFbN9 or embed.plnkr.co/x8EPgfk6kyHWRQTIFbN9/preview Cheers.

Crooksey Over a year ago

Im new to plnkr so also try plnkr.co/x8EPgfk6kyHWRQTIFbN9 or plnkr.co/x8EPgfk6kyHWRQTIFbN9

Ganaraj Over a year ago

You should probably understand angular better to do what you are attempting to do. First off you need to implement drag and drop in the angular world. Look at this : smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui If you do this right, the above code should start working. To explain why it wont work currently : You are currently just updating the view to reflect your changes. To do the recalculation you need to change the model as well, which is not done by Jquery UI.

Crooksey · Accepted Answer · 2012-12-21 15:51:51Z

Thanks to @ganaraj I used the guide found at

http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui

I also replaced my underscore code with pure angularjs code

$scope.getVan1Weight = function(){
     var sum = 0;
     for( t=0; t < $scope.van1.length; t++) { sum += $scope.van1[t].orderWeight }
     return sum.toFixed(2);;
}

At the beginning of my controller I also defined an empty array (to get overwritten later)

// Define an empty array
$scope.van1 = [];

As this stops any errors producing as the $http get takes a while to load and when you load a browser window the .length returns an error, so if you define an empty array it stops any errors. I could have tested to see if an array was valid and put some if clauses in, but my angularjs knowledge is very limited so this solution worked best for me.

zpydee · Accepted Answer · 2014-01-23 12:21:33Z

Here's something very similar to your requirement with a solution that works nicely...

Markup...

<table class="table table-condensed table-striped">
<thead>
    <tr>
        <th>Pillar Name</th>
        <th>Weight</th>
        <th>Metrics</th>
        <th> Actions</th>
    </tr>
</thead>
<tbody>
    <tr data-ng-repeat="p in l.pillars">
        <td>{{p.name}}</td>
        <td>{{p.weight}}</td>
        <td>{{p.metrics.length}}</td>
        <td>
            <a href="" data-ng-click="vm.editPillar(p)">
                <i class="fa fa-pencil blue"></i>
            </a>
            <a href="" data-ng-click="vm.deletePillar(p, l)">
                <i class="fa fa-times-circle red"></i>
            </a>
        </td>
    </tr>
    <tr>
        <td><strong>Totals</strong></td>
        <td><strong>{{l.pillars.summedWeight}}</strong></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

js, which gets called when i get pillars from the server or local cache...

function getSummedPillarWeight(pillars) {
        var summedWeight = 0;
        pillars.forEach(function (pillar) {
            summedWeight = summedWeight + pillar.weight;
        });
        return pillars.summedWeight = summedWeight;
    }

Collectives™ on Stack Overflow

AngularJS Dynamic sum of list

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related