使用 AngularJS 进行动态数据计算答案

【问题标题】：Dynamic data calculations using AngularJS使用 AngularJS 进行动态数据计算
【发布时间】：2016-03-03 09:31:17
【问题描述】：

我想要嵌套重复中的小计，把它想象成购物车，但购物车被分成产品（鞋子、夹克）或其他一些嵌套结构。

所以我认为（至少）有 3 种不同的方法可以达到相同的结果。有什么区别，特别是在性能方面，我应该使用哪个（对于大量数据）？

值得注意的是，这更多地是关于数据呈现（如管理视图），而不仅仅是关于如何总计购物车的问题（已经讨论了很多！）。更多关于如何从数据的角度处理它，当您有大量购物车和大量其他计算，例如平均成本、累积成本......人们在星期二（或其他任何时候）最喜欢的颜色时。

在模板中

    <table>
    <tr ng-repeat="product in cart.products">
        <td>{{product.name}}</td>
        <table>
            <tr ng-repeat="item in product.items">
                <td>{{item.name}}</td>
                <td>{{item.cost}}</td>
            </tr>
        </table>
        <td>{{ getProductTotal(product) }}</td>
    </tr>
    <tr>{{ getCartTotal() }}</tr>
</table>

对象的属性

$scope.cart = {
    person: "Nicky poppy pie",
    products: {},
    total: function () {
        var total = 0;
        foreach(product...)
        return total;
    }
};

或

$scope.cart = {};
$scope.cart.total = getCartTotal()

function getCartTotal() {
    //insert crazy calculations
}

观察者

$scope.$watch('cart', function() {
    var cartTotal = 0;
    $scope.cartItems.forEach(function(product) {
      cartTotal += product.cost();
    });
    $scope.cartTotal = cartTotal;
}, true);

【问题讨论】：

标签： javascript angularjs data-binding

【解决方案1】：

我认为你的方法是错误的。

您应该将总计作为购物车对象的属性。在您看来，您可以正常绑定它。您不想在每个 $scope.$digest 上进行所有“疯狂计算”，但只在以下情况下进行一次：

产品已添加（例如：cart.addProduct(product)）
产品已移除（例如：cart.removeProduct(product)）
数量已更改（例如：cart.updateQtyProduct(productId, qty)）
...

在每个方法结束时，您调用 updateTotalCart() 方法并设置对象的属性。

【讨论】：

如果我要获取某人购买的每辆购物车的历史记录怎么办？当我说动态时，我并不是说我想将新商品添加到购物车 (addProduct())，如果我选择了不同的人，然后我必须更新他们所有购物车、产品和商品的总数.数据将加载到选择中，但我只需要每次计算总计和平均值。
所有这些历史都来自数据库吗？那么你已经在数据库中有总数了，不是吗？如果没有，您可能每个用户都有一个“购物车”数组（例如：user.carts = [{products:[...], datetime: ... }, {products:[...], datetime: .. .}, {}, {}]。您可以循环数组并计算每个购物车的总数。这个想法是不要在视图内计算，而是在加载数据后计算。
如果您建议汇总，则它们不是解决此问题的好方法。问题不在于如何计算总数/平均值（以及其他），而是根据执行将计算放在 AngularJS 控制器中的位置（出于上述性能和原因）。抱歉，如果我没有说清楚
不应在控制器中进行计算。它应该在服务中完成。就像我在第一个答案中所说的那样，计算是在添加/修改或更新产品时完成的，并且是在 Angular 服务中完成的。在控制器中，您应该只指向对象上的计算属性。抱歉，除非您详细说明代码，否则我无法为您提供更多帮助。

【解决方案2】：

来自angularjs 表达式的官方文档：

如果您想运行更复杂的 JavaScript 代码，您应该将其设为控制器方法并从您的视图中调用该方法。 angularjs doc link

我认为这基本上意味着如果你认为你的计算足够简单，你可以使用角度表达式。

但如果计算复杂，控制器方法更可取。

【讨论】：