javascript - 使用 AngularJs 在选定的复选框上计算摘要

Question

我正在学习 AngularJs，并且已经使用 ng-repeat 创建了一个动态列表，但现在我找不到下一步的解决方案...

我有以下代码:

HTML:

<div ng-app="app">
    <div class="list" ng-controller="ListController">

        <div class="row" ng-repeat="prod in prodList">
            <div class="prod-name cell">
                <input type="checkbox" id="prod-{{ prod.id }}" data-ng-model="orders.prods.prod[prod.id]" value="{{ prod.id }}" data-cb="" /><label for="prod-{{ prod.id }}">{{ prod.name }}</label>
            </div>
            <div class="prod-size cell">
                <label for="prodColor-@{{ prod.id }}">
                    <select id="prodColor-{{ prod.id }}" data-ng-model="orders.prods.color[prod.id]" data-ng-options="color.id as color.name for color in prod.colors">
                        <option value="">Select one</option>
                    </select>
                </label>
            </div>
            <div class="prod-price cell">
                {{ prod.price }}
            </div>

        </div>

        <div class="sum">
            {{ sum }}
        </div>

    </div>
</div>

JS:

var app = angular.module("app", [], function () {
});

app.controller('ListController', function ($scope) {
    init();

    function init () {
        $scope.prodList = [{"id":"1","name":"window","colors":[{"id":"9","name":"white"},{"id":"11","name":"black"}],"price":"100"},{"id":"2","name":"door","colors":[{"id":"22","name":"blue"},{"id":"23","name":"red"}],"price":"356"},{"id":"3","name":"table","colors":[{"id":"37","name":"white"},{"id":"51","name":"black"}],"price":"505"}];
        $scope.orders = {};
        $scope.orders.prods = {};
        $scope.orders.prods.prod = {};
        $scope.orders.prods.color = {};
        $scope.sum = 0;
    }
});

工作演示:

http://jsfiddle.net/HDrzR/

问题

如何将所选产品的价格汇总计算到 $scope.sum 中？

已编辑:

因此，如果您从列表中选择“窗口”和“表格”，则总和应包含 606。但如果取消选择“表格”，则总和应为 100。

提前谢谢您!

Answer 1

您可以对 $scope.orders.prod 进行 $watch 并重新计算总和，或者(如果性能不是主要问题并且对象列表是不是很大)您可以使用 sum() 函数并在 View 中引用它:

Total: {{sum()}}

$scope.sum = function () {
    return $scope.prodList.filter(function (prod) {
        return $scope.orders.prods.prod[prod.id];
    }).reduce(function (subtotal, selectedProd) {
        return subtotal + parseInt(selectedProd.price);
    }, 0);
};

/* If the above looks complicated, it is the equivalent of: */
$scope.sum = function () {
    var sum = 0;
    for (var i = 0; i < $scope.prodList.length, i++) {
        var prod = $scope.prodList[i];
        if ($scope.orders.prods.prod[prod.id]) {
            sum += parseInt(prod.price);
        }
    }
    return sum;
}

<小时/>

如果您决定沿着观看路径走下去，代码应如下所示:

Total: {{watchedSum}}

$scope.sum = ...;   // same as above
$scope.$watchCollection('orders.prods.prod', function (newValue, oldValue) {
    if (newValue !== undefined) {
        $scope.watchedSum = $scope.sum();
    }
});

<子> 更新:
“窃取”Quad 的 $watchCollection，因为这比 $watch(..., true) 更“便宜”。
只要 $scope.order.prods.prod 仅包含原始值(即没有对象)，$watchCollection 就足以检测更改。

<小时/>

另请参阅此 short demo 说明这两种方法。