Das folgende Skript zeigt einen Einkaufswagen mit an ng-repeat. Für jedes Element im Array werden der Elementname, seine Menge und die Zwischensumme ( product.price * product.quantity) angezeigt .

Was ist der einfachste Weg, um den Gesamtpreis für wiederholte Elemente zu berechnen?

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

In Vorlage

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

Im Controller

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

Dies funktioniert sowohl im Filter als auch in der normalen Liste. Das erste, was Sie tun müssen, um einen neuen Filter für die Summe aller Werte aus der Liste zu erstellen und eine Lösung für die Summe der Gesamtmenge zu erhalten. Im Detail Code überprüfen Sie es Geiger Link .

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>

Überprüfen Sie diesen Fiddle Link

Dies zu realisieren, wurde vor langer Zeit beantwortet, wollte aber einen anderen Ansatz veröffentlichen, der nicht vorgestellt wurde ...

Verwenden Sie, ng-initum Ihre Gesamtsumme zu zählen. Auf diese Weise müssen Sie nicht im HTML und im Controller iterieren. In diesem Szenario halte ich dies für eine sauberere / einfachere Lösung. (Wenn die Zähllogik komplexer wäre, würde ich definitiv empfehlen, die Logik entsprechend auf die Steuerung oder den Dienst zu verschieben.)

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

Definieren / initialisieren Sie in Ihrem Controller natürlich einfach Ihr TotalFeld:

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

Sie können die Gesamtsumme im Inneren berechnen 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>

Überprüfen Sie das Ergebnis hier: http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview

Falls das Ergebnis der automatischen Aktualisierung vorliegt : http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (Danke - VicJordan)

Das ist meine Lösung

süßer und einfacher kundenspezifischer Filter:

(aber nur im Zusammenhang mit der einfachen Summe von Werten, nicht dem Summenprodukt, habe ich einen sumProductFilter erstellt und ihn als Bearbeitung an diesen Beitrag angehängt).

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

EDIT: sumProduct

Dies ist ein sumProductFilter, der eine beliebige Anzahl von Argumenten akzeptiert. Als Argument akzeptiert es den Namen der Eigenschaft aus den Eingabedaten und kann verschachtelte Eigenschaften verarbeiten (Verschachtelung markiert durch Punkt :) property.nested;

• Wenn Sie das Argument Null übergeben, wird die Länge der Eingabedaten zurückgegeben.
• Wenn Sie nur ein Argument übergeben, wird eine einfache Summe der Werte dieser Eigenschaften zurückgegeben.
• Wenn Sie mehr Argumente übergeben, wird die Summe der Produkte der Werte der übergebenen Eigenschaften zurückgegeben (skalare Summe der Eigenschaften).

Hier ist JS Fiddle und der Code

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

Einfache Lösung

Hier ist eine einfache Lösung. Keine zusätzliche for-Schleife erforderlich.

HTML-Teil

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

Skriptteil

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

Eine andere Möglichkeit, dies zu lösen , erstreckt sich von Vaclavs Antwort auf die Lösung dieser speziellen Berechnung - dh einer Berechnung für jede Zeile.

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

Um dies mit einer Berechnung zu tun, fügen Sie einfach eine Berechnungsfunktion zu Ihrem Bereich hinzu, z

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

Sie würden {{ datas|total:calcItemTotal|currency }}in Ihrem HTML-Code verwenden. Dies hat den Vorteil, dass nicht bei jedem Digest aufgerufen wird, da Filter verwendet werden und für einfache oder komplexe Summen verwendet werden können.

JSFiddle

Dies ist eine einfache Möglichkeit, dies mit ng-repeat und ng-init zu tun, um alle Werte zu aggregieren und das Modell mit einer item.total-Eigenschaft zu erweitern.

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

Die Anweisung ngInit ruft die Funktion set total für jedes Element auf. Die Funktion setTotals in der Steuerung berechnet die Gesamtsumme jedes Elements. Außerdem werden die Bereichsvariablen invoiceCount und invoiceTotal verwendet, um die Menge und die Summe aller Artikel zu aggregieren (zu summieren).

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

Weitere Informationen und eine Demo finden Sie unter diesem Link:

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

Ich bevorzuge elegante Lösungen

In Vorlage

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

Im Controller

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

Wenn Sie ES2015 (auch bekannt als ES6) verwenden

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

Sie können einen benutzerdefinierten Winkelfilter verwenden, der das Datensatzobjektarray und den Schlüssel in jedem Objekt summiert. Der Filter kann dann die Summe zurückgeben:

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

Dann können Sie in Ihrer Tabelle eine Spalte zusammenfassen:

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

Sie können versuchen, Dienste von eckigen js zu verwenden, es hat für mich funktioniert .. Geben Sie die Code-Schnipsel unten

Controller-Code:

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

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

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

Service code:

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

Hier ist meine Lösung für dieses Problem:

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

Skript

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

Reduzieren wird für jedes Produkt im Produktarray ausgeführt. Der Akkumulator ist der gesamte akkumulierte Betrag, currentValue ist das aktuelle Element des Arrays und die 0 im letzten ist der Anfangswert

Ich habe RajaShilpas Antwort etwas erweitert. Sie können folgende Syntax verwenden:

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

damit Sie auf das untergeordnete Objekt eines Objekts zugreifen können. Hier ist der Code für den Filter:

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

Nehmen Sie Vaclavs Antwort und machen Sie sie eckiger:

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

Dies bietet Ihnen den Vorteil, dass Sie sogar auf verschachtelte Daten und Array-Daten zugreifen können:

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

In HTML

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

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

Huy Nguyens Antwort ist fast da. Fügen Sie Folgendes hinzu, damit es funktioniert:

ng-repeat="_ in [ products ]"

... zur Zeile mit ng-init. Die Liste enthält immer ein einzelnes Element, sodass Angular den Block genau einmal wiederholt.

Zybneks Demo mit Filterung kann durch Hinzufügen von:

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

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

Das ist meine Lösung

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

Sie müssen dem Controller einen Namen hinzufügen, Controller as SomeNamedamit wir dort Variablen zwischenspeichern können (ist dies wirklich erforderlich? Ich bin mit der Verwendung von $ parent nicht vertraut, daher weiß ich es nicht).

Fügen Sie dann für jede Wiederholung hinzu ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"

$first Zum Überprüfen wird es zuerst auf Null zurückgesetzt, andernfalls wird der Gesamtwert fortgesetzt

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

Nachdem ich alle Antworten hier gelesen hatte - wie man gruppierte Informationen zusammenfasst -, entschied ich mich, alles zu überspringen und lud einfach eine der SQL-Javascript-Bibliotheken. Ich benutze alasql, ja, es dauert ein paar Sekunden länger beim Laden, spart aber unzählige Zeit beim Codieren und Debuggen. Nun zu group and sum () Ich benutze nur,

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

Ich weiß, das klingt wie ein Scherz über Angular / JS, aber SQL hat dies vor über 30 Jahren wirklich gelöst, und wir sollten es nicht in einem Browser neu erfinden müssen.