javascript - 使用 AngularJS 进行动态数据计算

Question

我想要嵌套重复中的小计，可以将其想象为购物车，但购物车分为产品(鞋子、夹克)或其他嵌套结构。

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

值得注意的是，这更多的是关于数据呈现(如管理 View )，而不仅仅是关于如何总计购物车的问题(这已经被介绍了很多!)。更多关于当您有大量购物车和大量其他计算(例如平均成本、累积成本……人们在星期二最喜欢的颜色(或其他!))时如何从数据 Angular 处理它。

在模板中

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

Answer 1

我认为您的处理方式是错误的。

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

• 产品已添加(例如:cart.addProduct(product))
• 产品已删除(例如:cart.removeProduct(product))
• 数量已更改(例如:cart.updateQtyProduct(productId, qty))
• ...

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