AngularJS Sum of ng-repeat column

Question

I am trying to get the sum of each of my columns in a table that is using ng-repeat. I followed an example I found online, but it's loading 0 for the subtotal.

Here's the filter I've got in my controller:

.filter('sumByKey', function() {
    return function(data, key) {
        if (typeof(data) === 'undefined' || typeof(key) === 'undefined') {
            return 0;
        }

        var sum = 0;
        for (var i = data.length - 1; i >= 0; i--) {
            sum += parseInt(data[i][key]);
        }

        return sum;
    };
});

Then my view looks like this:

 <table class="table table-bordered table-hover table-responsive">
    <thead>            
    <tr>
        <th>
            Date Ordered
        </th>
        <th>
            Retail
        </th>
        <th>
            Airtime
        </th>
        <th>
            Spiff
        </th>
        <th>
            Retail
        </th>
        <th>
            Cost
        </th>
        <th>
            Profit
        </th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="sale in vm.sales">
            <td>
                {{ sale.dateOrdered }}
            </td>
            <td>
                {{ sale.firstLoadRetail}}
            </td>
            <td>
                {{ sale.instantProfitAirTime }}
            </td>
            <td>
                {{ sale.instantProfitSpiff }}
            </td>
            <td>
                {{ sale.netRetail }}
            </td>
            <td>
                {{ sale.netCost }}
            </td>
            <td>
                {{ sale.netProfit }}
            </td>
        </tr>
        <tr>
            <th>
                Subtotal
            </th>
            <td >{{ sales | sumByKey : 'firstLoadRetail'  }}</td>
            <td>{{ sales | sumByKey : 'instantProfitAirTime' }}</td>
            <td>{{ sales | sumByKey : 'instantProfitSpiff' }}</td>
            <td>{{ sales | sumByKey : 'netRetail' }}</td>
            <td>{{ sales | sumByKey : 'netCost' }}</td>
            <td>{{ sales | sumByKey : 'netProfit' }}</td>
        </tr>
    </tbody>
</table>

What am I doing wrong? Thanks in advance.

Reactgular · Accepted Answer · 2015-10-15 18:28:31Z

1

You forgot the vm. part.

        <td >{{ vm.sales | sumByKey : 'firstLoadRetail'  }}</td>
        <td>{{ vm.sales | sumByKey : 'instantProfitAirTime' }}</td>
        <td>{{ vm.sales | sumByKey : 'instantProfitSpiff' }}</td>
        <td>{{ vm.sales | sumByKey : 'netRetail' }}</td>
        <td>{{ vm.sales | sumByKey : 'netCost' }}</td>
        <td>{{ vm.sales | sumByKey : 'netProfit' }}</td>

answered Oct 15, 2015 at 18:28

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

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

1 Comment

hollyquinn Over a year ago

I won't. I hate how it makes you wait 10 minutes, but I'll make sure to do it you. Thanks again!

Collectives™ on Stack Overflow

AngularJS Sum of ng-repeat column

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related