Aşağıdaki komut dosyası kullanılarak bir alışveriş sepeti gösterilmektedir ng-repeat. Dizideki her öğe için öğe adını, miktarını ve alt toplamını ( product.price * product.quantity) gösterir.

Tekrarlanan elementlerin toplam fiyatını hesaplamanın en basit yolu nedir?

<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>

Şablonda

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

Denetleyicide

$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;
}

Bu aynı zamanda hem filtre hem de normal liste üzerinde çalışıyor. Listedeki tüm değerlerin toplamı için yeni bir filtre oluşturmak için ilk şey ve ayrıca toplam miktarın toplamı için bir çözüm verilir. Ayrıntılar kodunda kemancı bağlantısını kontrol edin .

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>

bu Fiddle Link'i kontrol et

Bunun uzun zaman önce cevaplandığını fark etmek, ancak sunulmayan farklı bir yaklaşımı göndermek istedim ...

ng-initToplamınızı hesaplamak için kullanın . Bu şekilde, HTML'de yinelemeniz ve denetleyicide yineleme yapmanız gerekmez. Bu senaryoda, bunun daha temiz / daha basit bir çözüm olduğunu düşünüyorum. (Çeteleme mantığı daha karmaşıksa, mantığı uygun şekilde denetleyiciye veya hizmete taşımanızı kesinlikle tavsiye ederim.)

    <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>

Elbette, denetleyicinizde, alanınızı tanımlamanız / başlatmanız yeterlidir Total:

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

Aşağıdaki toplamı hesaplayabilirsiniz ng-repeat:

<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>

Sonucu buradan kontrol edin: http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview

Otomatik güncelleme sonucu durumunda: http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (Teşekkürler - VicJordan)

Bu benim çözümüm

tatlı ve basit özel filtre:

(ancak sadece basit toplam değerlerle ilgili, toplam ürünle değil, sumProductfiltre oluşturdum ve bu yazıya düzenleme olarak ekledim).

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

DÜZENLEME: sumProduct

Bu sumProductfiltredir, herhangi bir sayıda argümanı kabul eder. Bir argüman olarak, giriş verilerinden özelliğin adını kabul eder ve yuvalanmış özelliği işleyebilir (nokta ile işaretlenmiş yuvalama:) property.nested;

• Sıfır bağımsız değişkeni geçirmek, giriş verilerinin uzunluğunu döndürür.
• Yalnızca bir bağımsız değişken geçirmek, bu özelliklerin değerlerinin basit toplamını döndürür.
• Daha fazla bağımsız değişken geçirmek, aktarılan özelliklerin değerlerinin toplamını döndürür (özelliklerin skaler toplamı).

işte JS Fiddle ve kod

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

Basit Çözüm

İşte basit bir çözüm. Ek döngü için gerekli değildir.

HTML bölümü

         <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>

Komut Dosyası Bölümü

 $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;
 }

Bunu çözmenin başka bir yolu, Vaclav'ın cevabından bu hesaplamayı çözmek için uzanır - yani her satırda bir hesaplama.

    .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;
            }
        };
    })

Bunu bir hesaplama ile yapmak için, kapsamınıza bir hesaplama fonksiyonu eklemeniz yeterlidir, örn.

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

Sen kullanırsınız {{ datas|total:calcItemTotal|currency }}HTML kodundaki. Bu, her özet için çağrılmama avantajına sahiptir, çünkü filtreler kullanır ve basit veya karmaşık toplamlar için kullanılabilir.

JSFiddle

Bu, tüm değerleri toplamak ve modeli bir item.total özelliğiyle genişletmek için ng-tekrar ve ng-init ile bunu yapmanın basit bir yoludur.

<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>

NgInit yönergesi, her öğe için ayarlı toplam işlevini çağırır. Kontrolördeki setTotals işlevi, her bir öğe toplamını hesaplar. Ayrıca, tüm kalemler için miktarı ve toplamı toplamak (toplamak) için invoiceCount ve invoiceTotal kapsam değişkenlerini kullanır.

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

daha fazla bilgi ve demo için şu bağlantıya bakın:

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

Zarif çözümleri tercih ederim

Şablonda

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

Denetleyicide

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

ES2015 (ES6 olarak da bilinir) kullanıyorsanız

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

Veri kümesi nesne dizisini ve her nesnedeki anahtarı toplayan özel bir Açısal filtre kullanabilirsiniz. Filtre daha sonra toplamı döndürebilir:

.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;
        };
    })

Ardından tablonuzda bir sütun toplamak için kullanabilirsiniz:

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

Açısal js hizmetlerini kullanmayı deneyebilirsiniz, bu benim için çalıştı ... aşağıda kod parçacıkları vermek

Denetleyici kodu:

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

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

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

Servis kodu:

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;
        }
    };
});

İşte bu soruna çözümüm:

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

senaryo

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

ürün dizisindeki her ürün için indirgeme yürütülür. Biriktirici, toplam biriken miktardır, currentValue dizinin geçerli öğesidir ve sondaki 0, başlangıç ​​değeridir

RajaShilpa'nın cevabını biraz genişlettim. Sözdizimini şu şekilde kullanabilirsiniz:

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

böylece bir nesnenin alt nesnesine erişebilirsiniz. İşte filtrenin kodu:

.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;
    }
});

Vaclav'ın cevabını almak ve daha Açısal hale getirmek:

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;
        }
    };
}]);

Bu size iç içe ve dizi verilerine erişme avantajını sağlar:

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

Html olarak

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

javascript'te

  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);
            };
        });

Huy Nguyenen'in cevabı neredeyse orada. Çalışması için şunu ekleyin:

ng-repeat="_ in [ products ]"

... ng-init ile çizgiye. Listede her zaman tek bir öğe vardır, bu nedenle Angular bloğu tam olarak bir kez tekrarlayacaktır.

Zybnek'in filtreleme kullanan demosu, aşağıdakiler eklenerek çalıştırılabilir:

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

Bkz. 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;
        }

Bu benim çözümüm

<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>

Controller as SomeNameDeğişkeni orada önbelleğe alabilmemiz için denetleyiciye ad eklemenizi gerektirir (gerçekten gerekli mi? $ Parent kullanmaya aşina olmadığım için bilmiyorum)

Sonra her tekrar için şunu ekleyin: ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"

$first önce kontrol etmek için sonra sıfıra sıfırlanır, aksi takdirde toplam değeri devam eder

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

Buradaki tüm cevapları okuduktan sonra - gruplandırılmış bilgileri nasıl özetleyebilirim, hepsini atlamaya karar verdim ve SQL javascript kitaplıklarından birini yükledim. Alasql kullanıyorum, evet yükleme süresinde birkaç saniye daha uzun sürüyor ancak kodlama ve hata ayıklamada sayısız zaman kazandırıyor, Şimdi gruplamak ve toplamak () sadece kullanıyorum,

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

Bunun angular / js hakkında biraz rant gibi geldiğini biliyorum ama gerçekten SQL bunu 30+ yıl önce çözdü ve onu bir tarayıcıda yeniden icat etmemiz gerekmiyor.