Kịch bản bên dưới hiển thị một giỏ hàng đang sử dụng ng-repeat. Đối với mỗi phần tử trong mảng, nó hiển thị tên mục, số lượng của nó và tổng phụ ( product.price * product.quantity).

Cách đơn giản nhất để tính tổng giá của các yếu tố lặp lại là gì?

<table>

    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>

    <tr ng-repeat="product in cart.products">
        <td>{{product.name}}</td>
        <td>{{product.quantity}}</td>
        <td>{{product.price * product.quantity}} €</td>
    </tr>

    <tr>
        <td></td>
        <td>Total :</td>
        <td></td> <!-- Here is the total value of my cart -->
    </tr>

</table>

Trong mẫu

<td>Total: {{ getTotal() }}</td>

Trong bộ điều khiển

$scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.cart.products.length; i++){
        var product = $scope.cart.products[i];
        total += (product.price * product.quantity);
    }
    return total;
}

Điều này cũng đang hoạt động cả bộ lọc và danh sách bình thường. Điều đầu tiên là tạo một bộ lọc mới cho tổng tất cả các giá trị từ danh sách và cũng đưa ra giải pháp cho tổng của tổng số lượng. Trong chi tiết mã kiểm tra nó liên kết fiddler .

angular.module("sampleApp", [])
        .filter('sumOfValue', function () {
        return function (data, key) {        
            if (angular.isUndefined(data) || angular.isUndefined(key))
                return 0;        
            var sum = 0;        
            angular.forEach(data,function(value){
                sum = sum + parseInt(value[key], 10);
            });        
            return sum;
        }
    }).filter('totalSumPriceQty', function () {
        return function (data, key1, key2) {        
            if (angular.isUndefined(data) || angular.isUndefined(key1)  || angular.isUndefined(key2)) 
                return 0;        
            var sum = 0;
            angular.forEach(data,function(value){
                sum = sum + (parseInt(value[key1], 10) * parseInt(value[key2], 10));
            });
            return sum;
        }
    }).controller("sampleController", function ($scope) {
        $scope.items = [
          {"id": 1,"details": "test11","quantity": 2,"price": 100}, 
          {"id": 2,"details": "test12","quantity": 5,"price": 120}, 
          {"id": 3,"details": "test3","quantity": 6,"price": 170}, 
          {"id": 4,"details": "test4","quantity": 8,"price": 70}
        ];
    });


<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
      <label>Search</label>
      <input type="text" class="form-control" ng-model="searchFilter" />
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">
        <h4>Id</h4>

      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">
        <h4>Details</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Quantity</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Price</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Total</h4>

      </div>
      <div ng-repeat="item in resultValue=(items | filter:{'details':searchFilter})">
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">{{item.id}}</div>
        <div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">{{item.details}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.price}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity * item.price}}</div>
      </div>
      <div colspan='3' class="col-md-8 col-lg-8 col-sm-8 col-xsml-8 text-right">
        <h4>{{resultValue | sumOfValue:'quantity'}}</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>{{resultValue | sumOfValue:'price'}}</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>{{resultValue | totalSumPriceQty:'quantity':'price'}}</h4>

      </div>
    </div>
  </div>
</div>

kiểm tra liên kết Fiddle này

Nhận ra điều này đã được trả lời từ lâu, nhưng muốn đăng cách tiếp cận khác không được trình bày ...

Sử dụng ng-initđể kiểm đếm tổng số của bạn. Bằng cách này, bạn không phải lặp lại trong HTML và lặp lại trong bộ điều khiển. Trong trường hợp này, tôi nghĩ đây là một giải pháp sạch hơn / đơn giản hơn. (Nếu logic kiểm đếm phức tạp hơn, tôi chắc chắn sẽ khuyên bạn nên chuyển logic sang bộ điều khiển hoặc dịch vụ nếu thích hợp.)

    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>

    <tr ng-repeat="product in cart.products">
        <td>{{product.name}}</td>
        <td>{{product.quantity}}</td>
        <td ng-init="itemTotal = product.price * product.quantity; controller.Total = controller.Total + itemTotal">{{itemTotal}} €</td>
    </tr>

    <tr>
        <td></td>
        <td>Total :</td>
        <td>{{ controller.Total }}</td> // Here is the total value of my cart
    </tr>

Tất nhiên, trong bộ điều khiển của bạn, chỉ cần xác định / khởi tạo Totaltrường của bạn :

// random controller snippet
function yourController($scope..., blah) {
    var vm = this;
    vm.Total = 0;
}

Bạn có thể tính tổng bên trong như ng-repeatsau:

<tbody ng-init="total = 0">
  <tr ng-repeat="product in products">
    <td>{{ product.name }}</td>
    <td>{{ product.quantity }}</td>
    <td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
  </tr>
  <tr>
    <td>Total</td>
    <td></td>
    <td>${{ total }}</td>
  </tr>
</tbody>

Kiểm tra kết quả tại đây: http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview

Trong trường hợp kết quả cập nhật tự động: http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (Cảm ơn - VicJordan)

Đây là giải pháp của tôi

bộ lọc tùy chỉnh ngọt ngào và đơn giản:

(nhưng chỉ liên quan đến tổng giá trị đơn giản, không phải tổng sản phẩm, tôi đã tạo sumProductbộ lọc và thêm nó dưới dạng chỉnh sửa vào bài đăng này).

angular.module('myApp', [])

    .filter('total', function () {
        return function (input, property) {
            var i = input instanceof Array ? input.length : 0;
// if property is not defined, returns length of array
// if array has zero length or if it is not an array, return zero
            if (typeof property === 'undefined' || i === 0) {
                return i;
// test if property is number so it can be counted
            } else if (isNaN(input[0][property])) {
                throw 'filter total can count only numeric values';
// finaly, do the counting and return total
            } else {
                var total = 0;
                while (i--)
                    total += input[i][property];
                return total;
            }
        };
    })

JS Fiddle

CHỈNH SỬA: sumProduct

Đây là sumProductbộ lọc, nó chấp nhận bất kỳ số lượng đối số nào. Là một đối số, nó chấp nhận tên của thuộc tính từ dữ liệu đầu vào và nó có thể xử lý thuộc tính lồng nhau (lồng nhau được đánh dấu bằng dấu chấm property.nested:);

• Truyền đối số không trả về độ dài của dữ liệu đầu vào.
• Chỉ chuyển một đối số sẽ trả về tổng giá trị đơn giản của các thuộc tính đó.
• Truyền nhiều đối số hơn trả về tổng tích các giá trị của thuộc tính đã truyền (tổng vô hướng của thuộc tính).

đây là JS Fiddle và mã

angular.module('myApp', [])
    .filter('sumProduct', function() {
        return function (input) {
            var i = input instanceof Array ? input.length : 0;
            var a = arguments.length;
            if (a === 1 || i === 0)
                return i;

            var keys = [];
            while (a-- > 1) {
                var key = arguments[a].split('.');
                var property = getNestedPropertyByKey(input[0], key);
                if (isNaN(property))
                    throw 'filter sumProduct can count only numeric values';
                keys.push(key);
            }

            var total = 0;
            while (i--) {
                var product = 1;
                for (var k = 0; k < keys.length; k++)
                    product *= getNestedPropertyByKey(input[i], keys[k]);
                total += product;
            }
            return total;

            function getNestedPropertyByKey(data, key) {
                for (var j = 0; j < key.length; j++)
                    data = data[key[j]];
                return data;
            }
        }
    })

JS Fiddle

Giải pháp đơn giản

Đây là một giải pháp đơn giản. Không cần bổ sung cho vòng lặp.

Phần HTML

         <table ng-init="ResetTotalAmt()">
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                    <th>Price</th>
                </tr>

                <tr ng-repeat="product in cart.products">
                    <td ng-init="CalculateSum(product)">{{product.name}}</td>
                    <td>{{product.quantity}}</td>
                    <td>{{product.price * product.quantity}} €</td>
                </tr>

                <tr>
                    <td></td>
                    <td>Total :</td>
                    <td>{{cart.TotalAmt}}</td> // Here is the total value of my cart
                </tr>

           </table>

Phần kịch bản

 $scope.cart.TotalAmt = 0;
 $scope.CalculateSum= function (product) {
   $scope.cart.TotalAmt += (product.price * product.quantity);
 }
//It is enough to Write code $scope.cart.TotalAmt =0; in the function where the cart.products get allocated value. 
$scope.ResetTotalAmt = function (product) {
   $scope.cart.TotalAmt =0;
 }

Một cách khác để giải quyết vấn đề này, mở rộng từ câu trả lời của Vaclav để giải quyết phép tính cụ thể này - tức là phép tính trên mỗi hàng.

    .filter('total', function () {
        return function (input, property) {
            var i = input instanceof Array ? input.length : 0;
            if (typeof property === 'undefined' || i === 0) {
                return i;
            } else if (typeof property === 'function') {
                var total = 0; 
                while (i--)
                    total += property(input[i]);
                return total;
            } else if (isNaN(input[0][property])) {
                throw 'filter total can count only numeric values';
            } else {
                var total = 0;
                while (i--)
                    total += input[i][property];
                return total;
            }
        };
    })

Để thực hiện việc này với một phép tính, chỉ cần thêm một hàm tính toán vào phạm vi của bạn, ví dụ:

$scope.calcItemTotal = function(v) { return v.price*v.quantity; };

Bạn sẽ sử dụng {{ datas|total:calcItemTotal|currency }}trong mã HTML của mình. Điều này có lợi thế là không được gọi cho mọi thông báo vì nó sử dụng bộ lọc và có thể được sử dụng cho các tổng đơn giản hoặc phức tạp.

JSFiddle

Đây là một cách đơn giản để thực hiện việc này với ng-repeat và ng-init để tổng hợp tất cả các giá trị và mở rộng mô hình với thuộc tính item.total.

<table>
<tr ng-repeat="item in items" ng-init="setTotals(item)">
                    <td>{{item.name}}</td>
                    <td>{{item.quantity}}</td>
                    <td>{{item.unitCost | number:2}}</td>
                    <td>{{item.total | number:2}}</td>
</tr>
<tr class="bg-warning">
                    <td>Totals</td>
                    <td>{{invoiceCount}}</td>
                    <td></td>                    
                    <td>{{invoiceTotal | number:2}}</td>
                </tr>
</table>

Lệnh ngInit gọi hàm tổng đã đặt cho từng mục. Hàm setTotals trong bộ điều khiển tính tổng từng mục. Nó cũng sử dụng các biến phạm vi ChemicalCount và billTotal để tổng hợp (tính tổng) số lượng và tổng số cho tất cả các mặt hàng.

$scope.setTotals = function(item){
        if (item){
            item.total = item.quantity * item.unitCost;
            $scope.invoiceCount += item.quantity;
            $scope.invoiceTotal += item.total;
        }
    }

để biết thêm thông tin và xem bản demo tại liên kết này:

http://www.ozkary.com/2015/06/angularjs-calculate-totals-using.html

Tôi thích các giải pháp thanh lịch

Trong mẫu

<td>Total: {{ totalSum }}</td>

Trong bộ điều khiển

$scope.totalSum = Object.keys(cart.products).map(function(k){
    return +cart.products[k].price;
}).reduce(function(a,b){ return a + b },0);

Nếu bạn đang sử dụng ES2015 (hay còn gọi là ES6)

$scope.totalSum = Object.keys(cart.products)
  .map(k => +cart.products[k].price)
  .reduce((a, b) => a + b);

Bạn có thể sử dụng bộ lọc Angular tùy chỉnh lấy mảng đối tượng tập dữ liệu và khóa trong mỗi đối tượng để tính tổng. Sau đó, bộ lọc có thể trả về tổng:

.filter('sumColumn', function(){
        return function(dataSet, columnToSum){
            let sum = 0;

            for(let i = 0; i < dataSet.length; i++){
                sum += parseFloat(dataSet[i][columnToSum]) || 0;
            }

            return sum;
        };
    })

Sau đó, trong bảng của bạn để tính tổng một cột, bạn có thể sử dụng:

<th>{{ dataSet | sumColumn: 'keyInObjectToSum' }}</th>

Bạn có thể thử sử dụng các dịch vụ của góc cạnh js, nó đã hoạt động với tôi..Xin lỗi các đoạn mã bên dưới

Mã bộ điều khiển:

$scope.total = 0;
var aCart = new CartService();

$scope.addItemToCart = function (product) {
    aCart.addCartTotal(product.Price);
};

$scope.showCart = function () {    
    $scope.total = aCart.getCartTotal();
};

Mã dịch vụ:

app.service("CartService", function () {

    Total = [];
    Total.length = 0;

    return function () {

        this.addCartTotal = function (inTotal) {
            Total.push( inTotal);
        }

        this.getCartTotal = function () {
            var sum = 0;
            for (var i = 0; i < Total.length; i++) {
                sum += parseInt(Total[i], 10); 
            }
            return sum;
        }
    };
});

đây là giải pháp của tôi cho vấn đề này:

<td>Total: {{ calculateTotal() }}</td>

kịch bản

$scope.calculateVAT = function () {
    return $scope.cart.products.reduce((accumulator, currentValue) => accumulator + (currentValue.price * currentValue.quantity), 0);
};

giảm sẽ thực thi cho từng sản phẩm trong mảng sản phẩm. Accumulator là tổng số tiền tích lũy, currentValue là phần tử hiện tại của mảng và số 0 ở cuối cùng là giá trị ban đầu

Tôi đã mở rộng một chút về câu trả lời của RajaShilpa. Bạn có thể sử dụng cú pháp như:

{{object | sumOfTwoValues:'quantity':'products.productWeight'}}

để bạn có thể truy cập đối tượng con của một đối tượng. Đây là mã cho bộ lọc:

.filter('sumOfTwoValues', function () {
    return function (data, key1, key2) {
        if (typeof (data) === 'undefined' || typeof (key1) === 'undefined' || typeof (key2) === 'undefined') {
            return 0;
        }
        var keyObjects1 = key1.split('.');
        var keyObjects2 = key2.split('.');
        var sum = 0;
        for (i = 0; i < data.length; i++) {
            var value1 = data[i];
            var value2 = data[i];
            for (j = 0; j < keyObjects1.length; j++) {
                value1 = value1[keyObjects1[j]];
            }
            for (k = 0; k < keyObjects2.length; k++) {
                value2 = value2[keyObjects2[k]];
            }
            sum = sum + (value1 * value2);
        }
        return sum;
    }
});

Lấy câu trả lời của Vaclav và làm cho nó giống Angular hơn:

angular.module('myApp').filter('total', ['$parse', function ($parse) {
    return function (input, property) {
        var i = input instanceof Array ? input.length : 0,
            p = $parse(property);

        if (typeof property === 'undefined' || i === 0) {
            return i;
        } else if (isNaN(p(input[0]))) {
            throw 'filter total can count only numeric values';
        } else {
            var total = 0;
            while (i--)
                total += p(input[i]);
            return total;
        }
    };
}]);

Điều này mang lại cho bạn lợi ích ngay cả khi truy cập dữ liệu mảng và dữ liệu lồng nhau:

{{data | total:'values[0].value'}}

Trong html

<b class="text-primary">Total Amount: ${{ data.allTicketsTotalPrice() }}</b>

trong javascript

  app.controller('myController', function ($http) {
            var vm = this;          
            vm.allTicketsTotalPrice = function () {
                var totalPrice = 0;
                angular.forEach(vm.ticketTotalPrice, function (value, key) {
                    totalPrice += parseFloat(value);
                });
                return totalPrice.toFixed(2);
            };
        });

Câu trả lời của Huy Nguyễn gần như đã có. Để làm cho nó hoạt động, hãy thêm:

ng-repeat="_ in [ products ]"

... đến dòng có ng-init. Danh sách luôn có một mục duy nhất, vì vậy Angular sẽ lặp lại khối chính xác một lần.

Bản demo của Zybnek sử dụng bộ lọc có thể hoạt động bằng cách thêm:

ng-repeat="_ in [ [ products, search ] ]"

Xem http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview .

**Angular 6: Grand Total**       
 **<h2 align="center">Usage Details Of {{profile$.firstName}}</h2>
        <table align ="center">
          <tr>
            <th>Call Usage</th>
            <th>Data Usage</th>
            <th>SMS Usage</th>
            <th>Total Bill</th>
          </tr>
          <tr>
          <tr *ngFor="let user of bills$">
            <td>{{ user.callUsage}}</td>
            <td>{{ user.dataUsage }}</td>
            <td>{{ user.smsUsage }}</td>
       <td>{{user.callUsage *2 + user.dataUsage *1 + user.smsUsage *1}}</td>
          </tr>


          <tr>
            <th> </th>
            <th>Grand Total</th>
            <th></th>
            <td>{{total( bills$)}}</td>
          </tr>
        </table>**


    **Controller:**
        total(bills) {
            var total = 0;
            bills.forEach(element => {
total = total + (element.callUsage * 2 + element.dataUsage * 1 + element.smsUsage * 1);
            });
            return total;
        }

Đây là giải pháp của tôi

<div ng-controller="MainCtrl as mc">
  <ul>
      <li ng-repeat="n in [1,2,3,4]" ng-init="mc.sum = ($first ? 0 : mc.sum) + n">{{n}}</li>
      <li>sum : {{mc.sum}}</li>
  </ul>
</div>

Nó yêu cầu bạn thêm tên vào controller Controller as SomeNameđể chúng ta có thể cache biến trong đó (nó có thực sự yêu cầu không? Tôi không quen với việc sử dụng $ parent nên không biết)

Sau đó, đối với mỗi lần lặp lại, hãy thêm ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"

$first để kiểm tra nó trước tiên nó đặt lại về 0, nếu không nó sẽ tiếp tục giá trị tổng hợp

http://jsfiddle.net/thainayu/harcv74f/

Sau khi đọc tất cả các câu trả lời ở đây - cách tóm tắt thông tin được nhóm, tôi quyết định bỏ qua tất cả và chỉ tải một trong các thư viện javascript SQL. Tôi đang sử dụng alasql, vâng, thời gian tải lâu hơn vài giây nhưng tiết kiệm được vô số thời gian trong việc viết mã và gỡ lỗi, Bây giờ để nhóm và sum () tôi chỉ sử dụng,

$scope.bySchool = alasql('SELECT School, SUM(Cost) AS Cost from ? GROUP BY School',[restResults]);

Tôi biết điều này nghe có vẻ hơi khó hiểu về góc độ / js nhưng thực sự SQL đã giải quyết vấn đề này hơn 30 năm trước và chúng ta không cần phải phát minh lại nó trong một trình duyệt.