ng-repeatสคริปต์ด้านล่างแสดงรถเข็นร้านใช้ สำหรับแต่ละองค์ประกอบในอาร์เรย์จะแสดงชื่อรายการจำนวนและผลรวมย่อย ( product.price * product.quantity)

วิธีที่ง่ายที่สุดในการคำนวณราคารวมขององค์ประกอบซ้ำคืออะไร?

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

ในเทมเพลต

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

ในตัวควบคุม

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

นอกจากนี้ยังใช้งานได้ทั้งตัวกรองและรายการปกติ สิ่งแรกในการสร้างตัวกรองใหม่สำหรับผลรวมของค่าทั้งหมดจากรายการและกำหนดวิธีแก้ปัญหาสำหรับผลรวมของปริมาณทั้งหมด ในรหัสตรวจสอบรายละเอียดการเชื่อมโยงไวโอลิน

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>

ตรวจสอบFiddle Link นี้

ตระหนักถึงคำตอบนี้นานแล้ว แต่ต้องการโพสต์แนวทางอื่นที่ไม่ได้นำเสนอ ...

ใช้ng-initเพื่อนับยอดรวมของคุณ ด้วยวิธีนี้คุณไม่ต้องวนซ้ำใน HTML และวนซ้ำในคอนโทรลเลอร์ ในสถานการณ์นี้ฉันคิดว่านี่เป็นวิธีที่สะอาด / ง่ายกว่า (หากตรรกะการนับซับซ้อนกว่านี้ฉันขอแนะนำให้ย้ายตรรกะไปยังคอนโทรลเลอร์หรือบริการตามความเหมาะสม)

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

แน่นอนในคอนโทรลเลอร์ของคุณเพียงแค่กำหนด / เริ่มต้นTotalฟิลด์ของคุณ:

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

คุณสามารถคำนวณผลรวมภายในได้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>

ตรวจสอบผลที่นี่: http://plnkr.co/edit/Gb8XiCf2RWiozFI3xWzp?p=preview

ในกรณีผลการอัปเดตอัตโนมัติ: http://plnkr.co/edit/QSxYbgjDjkuSH2s5JBPf?p=preview (ขอบคุณ - VicJordan)

นี่คือทางออกของฉัน

ตัวกรองแบบกำหนดเองที่หวานและเรียบง่าย:

(แต่เกี่ยวข้องกับผลรวมของค่าอย่างง่ายไม่ใช่ผลรวมของผลิตภัณฑ์ฉันได้สร้างsumProductตัวกรองและต่อท้ายเป็นแก้ไขโพสต์นี้)

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

แก้ไข: sumProduct

นี่คือsumProductตัวกรองซึ่งยอมรับอาร์กิวเมนต์จำนวนเท่าใดก็ได้ ในฐานะอาร์กิวเมนต์จะยอมรับชื่อของคุณสมบัติจากข้อมูลอินพุตและสามารถจัดการคุณสมบัติที่ซ้อนกันได้ (การซ้อนที่ทำเครื่องหมายด้วยจุด:) property.nested;

• การส่งอาร์กิวเมนต์เป็นศูนย์จะส่งกลับความยาวของข้อมูลอินพุต
• การส่งผ่านอาร์กิวเมนต์เพียงรายการเดียวจะส่งคืนค่าผลรวมของคุณสมบัติ
• การส่งผ่านอาร์กิวเมนต์เพิ่มเติมจะส่งคืนผลรวมของผลคูณของค่าของคุณสมบัติที่ส่งผ่าน (ผลรวมสเกลาร์ของคุณสมบัติ)

นี่คือ JS Fiddle และรหัส

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

วิธีแก้ปัญหาง่ายๆ

นี่คือวิธีง่ายๆ ไม่จำเป็นต้องใช้ห่วงเพิ่มเติม

ส่วน 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>

ส่วนสคริปต์

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

อีกวิธีหนึ่งในการแก้ปัญหานี้ขยายจากคำตอบของ Vaclav เพื่อแก้ปัญหาการคำนวณนี้โดยเฉพาะนั่นคือการคำนวณในแต่ละแถว

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

หากต้องการทำสิ่งนี้ด้วยการคำนวณเพียงแค่เพิ่มฟังก์ชันการคำนวณลงในขอบเขตของคุณเช่น

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

คุณจะใช้{{ datas|total:calcItemTotal|currency }}ในโค้ด HTML ของคุณ สิ่งนี้มีข้อได้เปรียบที่จะไม่ถูกเรียกสำหรับการแยกย่อยทุกรายการเนื่องจากใช้ตัวกรองและสามารถใช้สำหรับผลรวมแบบง่ายหรือแบบซับซ้อนได้

JSFiddle

นี่เป็นวิธีง่ายๆในการทำเช่นนี้ด้วย ng-repeat และ ng-init เพื่อรวมค่าทั้งหมดและขยายโมเดลด้วยคุณสมบัติ 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>

คำสั่ง ngInit เรียกใช้ฟังก์ชัน set total สำหรับแต่ละรายการ ฟังก์ชัน setTotals ในคอนโทรลเลอร์จะคำนวณยอดรวมแต่ละรายการ นอกจากนี้ยังใช้ตัวแปรขอบเขต invoiceCount และ invoiceTotal เพื่อรวม (sum) ปริมาณและยอดรวมสำหรับสินค้าทั้งหมด

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

สำหรับข้อมูลเพิ่มเติมและการสาธิตดูที่ลิงค์นี้:

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

ฉันชอบโซลูชันที่หรูหรา

ในเทมเพลต

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

ในตัวควบคุม

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

หากคุณใช้ ES2015 (aka ES6)

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

คุณสามารถใช้ตัวกรองเชิงมุมแบบกำหนดเองที่นำอาร์เรย์วัตถุชุดข้อมูลและคีย์ในแต่ละวัตถุมารวมกัน จากนั้นตัวกรองสามารถส่งคืนผลรวม:

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

จากนั้นในตารางของคุณเพื่อรวมคอลัมน์คุณสามารถใช้:

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

คุณอาจลองใช้บริการของ js เชิงมุมมันได้ผลสำหรับฉัน.. ขอข้อมูลโค้ดด้านล่าง

รหัสคอนโทรลเลอร์:

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

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

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

รหัสบริการ:

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

นี่คือวิธีแก้ปัญหาของฉัน:

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

สคริปต์

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

ลดจะดำเนินการสำหรับแต่ละผลิตภัณฑ์ในอาร์เรย์ผลิตภัณฑ์ Accumulator คือจำนวนสะสมทั้งหมด currentValue คือองค์ประกอบปัจจุบันของอาร์เรย์และ 0 ในค่าสุดท้ายคือค่าเริ่มต้น

ฉันขยายความเล็กน้อยเกี่ยวกับคำตอบของ RajaShilpa คุณสามารถใช้ไวยากรณ์เช่น:

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

เพื่อให้คุณสามารถเข้าถึงวัตถุลูกของวัตถุ นี่คือรหัสสำหรับตัวกรอง:

.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 และทำให้มันเป็นเชิงมุมมากขึ้น:

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

สิ่งนี้ทำให้คุณได้รับประโยชน์แม้กระทั่งการเข้าถึงข้อมูลที่ซ้อนกันและอาร์เรย์:

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

ใน html

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

ในจาวาสคริปต์

  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 Nguyen ใกล้เข้ามาแล้ว เพื่อให้ใช้งานได้เพิ่ม:

ng-repeat="_ in [ products ]"

... ไปยังบรรทัดด้วย ng-init รายการจะมีรายการเดียวเสมอดังนั้น Angular จะทำซ้ำบล็อกทุกครั้ง

การสาธิตของ Zybnek โดยใช้การกรองสามารถทำให้ทำงานได้โดยเพิ่ม:

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

ดู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;
        }

นี่คือทางออกของฉัน

<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 SomeNameเพื่อที่เราจะได้แคชตัวแปรในนั้น (จำเป็นจริงๆหรือเปล่าฉันไม่คุ้นเคยกับการใช้ $ parent เลยไม่รู้)

จากนั้นสำหรับการทำซ้ำแต่ละครั้งให้เพิ่ม ng-init"SomeName.SumVariable = ($first ? 0 : SomeName.SumVariable) + repeatValue"

$first สำหรับการตรวจสอบเป็นอันดับแรกจากนั้นรีเซ็ตเป็นศูนย์มิฉะนั้นจะยังคงเป็นค่ารวมต่อไป

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

หลังจากอ่านคำตอบทั้งหมดที่นี่ - วิธีสรุปข้อมูลที่จัดกลุ่มฉันตัดสินใจที่จะข้ามไปทั้งหมดและเพิ่งโหลดหนึ่งในไลบรารีจาวาสคริปต์ของ SQL ฉันใช้ alasql ใช่ใช้เวลาโหลดนานขึ้นสองสามวินาที แต่ประหยัดเวลาในการเข้ารหัสและดีบักนับไม่ถ้วนตอนนี้เพื่อจัดกลุ่มและผลรวม () ฉันเพิ่งใช้

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

ฉันรู้ว่านี่ฟังดูเป็นการพูดจาโผงผางเกี่ยวกับ angular / js แต่จริงๆแล้ว SQL แก้ไขปัญหานี้ได้เมื่อ 30+ ปีที่แล้วและเราไม่ควรประดิษฐ์ขึ้นใหม่ภายในเบราว์เซอร์