Question

On the shopping cart page I have a list of items to buy and a multiplicator for amount of each item. I made each row count the subtotal price for a number of current item, but I fail to count the total price for all items. As you can see, I tried to do it with my "total" variable, but if I want to correct the amount of each item, "total" remains the same. It sets its value only once, as it is not a function. How do I change that? Basically I need to sum up one column, but I'm stuck here. I just don't know how to address to it. This is the best I could do, as I'm new to angular.

    <tr class="cart_item" ng-repeat="p in ctrl.items" ng-init="total = 0">
          <td class="product-name" ng-bind="p.name.value"></td>
          <td class="product-price">
                   <input type="number" ng-model="item.cost" ng-init="item.cost=p.price.value" value="{{p.price.value}}">    
          </td>
          <td class="product-quantity">
                   <input type="number" ng-model="item.qty" ng-init="item.qty=1">
          </td>
          <td class="product-subtotal">
                   <span ng-init="$parent.total = $parent.total + (item.cost * item.qty)">{{item.cost * item.qty}}</span>
          </td>
    </tr>

    <tr class="cart_item">
          <td class="product-name">TOTAL FOR ALL ITEMS:</td>
          <td class="product-price"></td>
          <td class="product-quantity"></td>
          <td class="product-subtotal">
                  <span class="amount">{{ total }}</span>
          </td>
    </tr>

Answer 1

How about using ctrl?

<table ng-app="ShoppingCart" ng-controller="CartController as ctrl">
    <tr class="cart_item" ng-repeat="item in ctrl.items" ng-init="total = 0">
        <td class="product-name" ng-bind="item.name.value"></td>
        <td class="product-price">
            <input type="number" ng-model="item.cost" ng-init="item.cost = item.price.value">
        </td>
        <td class="product-quantity">
            <input type="number" ng-model="item.qty" ng-init="item.qty = 1">
        </td>
        <td class="product-subtotal">
            <span>{{item.cost * item.qty  | currency: '£'}}</span>
        </td>
    </tr>

    <tr class="cart_item">
        <td class="product-name">TOTAL FOR ALL ITEMS:</td>
        <td class="product-price"></td>
        <td class="product-quantity"></td>
        <td class="product-subtotal">
            <span class="amount">{{ ctrl.total() | currency: '£' }}</span>
        </td>
    </tr>
</table>

var app = angular.module("ShoppingCart", []);

app.controller('CartController', [function() {
    var ctrl = this;

    ctrl.items = [{
        name: {
            value: 'Item #1'
        },
        price: {
            value: 1
        }
    }, {
        name: {
            value: 'Item #2'
        },
        price: {
            value: 2
        }
    }]

    ctrl.total = function() {
        return ctrl.items.reduce(function(acc, item) {
            return acc + (item.cost * item.qty);
        }, 0);
    }
}]);

Example: https://jsfiddle.net/e42x8txx/

How do I calculate total sum in cart with AngularJS?

1 个答案: