Question

我完全不知道如何实现以下网站所取得的具体成果。有没有人知道如何将产品数量从产品详细信息页面更新到购物车，并且在购物车和产品详细信息页面之间共享/绑定该数量，以便从集合中重复每个产品。（我不是在谈论通过简单的自定义指令简单地获得全球购物车数量）。请参阅下面的链接。将产品添加到购物车，然后从产品页面和购物车本身更新数量。这就是我想要实现的目标。提前谢谢大家！

http://demo.shopnx.in/

Answer 1

通常情况下，如果您发布了一些您尝试过的代码，然后要求引导您出错的地方，您会得到更好的回复。我创建了一个简单的JSFiddle来演示这样做的一种方法。它非常简单，人为，不是任何想象力的产品，并没有真正做太多，但它应该向你展示一个结构，让你完成你所追求的功能。

关键是使用某种类型的共享存储，以便产品列表和购物车可以使用相同的项目数组。在示例中，我使用Value：

完成了此操作

.value('cartStorage', {
    items: []
})

然后在主控制器中注入该值：

.controller('mainController', function(cartStorage) {
    var _this = this;
    _this.cartStorage = cartStorage;

    _this.items = [{
        name: 'Apple',
        price: .5,
        quantity: 0,
        showAddToCart: false,
        addedToCart: false
    }, {
        name: 'Orange',
        price: .5,
        quantity: 0,
        showAddToCart: false,
        addedToCart: false
    }, {
        name: 'Grapes',
        price: 1,
        quantity: 0,
        showAddToCart: false,
        addedToCart: false
    }];

    _this.addToCart = function(item) {
        _this.cartStorage.items.push(item);
        item.addedToCart = true;
    }

    _this.increaseItemAmount = function(item) {
        item.quantity++;
        item.showAddToCart = true;
    }

    _this.decreaseItemAmount = function(item) {
        item.quantity--;
        if (item.quantity <= 0) {
            item.quantity = 0;
            item.addedToCart = false;
            item.showAddToCart = false;
            var itemIndex = _this.cartStorage.items.indexOf(item);
            if (itemIndex > -1) {
                _this.cartStorage.items.splice(itemIndex, 1);
            }
        } else {
            item.showAddToCart = true;
        }
    }
})

和推车控制器一样：

.controller('cartController', function(cartStorage) {
    var _this = this;
    _this.cartStorage = cartStorage;

    _this.increaseItemAmount = function(item) {
        item.quantity++;
    }

    _this.decreaseItemAmount = function(item) {
        item.quantity--;
        if (item.quantity <= 0) {
            item.quantity = 0;
            item.addedToCart = false;
            item.showAddToCart = false;
            var itemIndex = _this.cartStorage.items.indexOf(item);
            if (itemIndex > -1) {
                _this.cartStorage.items.splice(itemIndex, 1);
            }
        }
    }

    _this.removeFromCart = function(item) {
        item.quantity = 0;
        item.addedToCart = false;
        item.showAddToCart = false;
        var itemIndex = _this.cartStorage.items.indexOf(item);
        if (itemIndex > -1) {
            _this.cartStorage.items.splice(itemIndex, 1);
        }
    }
})

现在共享{{1}}对象，因此在一个控制器中进行的任何更新都将自动反映在另一个控制器中。剩下的就是标记：

cartStorage

更新显示工厂的使用而不是值

而不是使用Value使用此服务：

<div ng-app="app">
    <div ng-controller="mainController as main">
        <h2>Main Controller</h2>
        <div>
            <table>
                <tr>
                    <td>Item</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    <td></td>
                </tr>
                <tr ng-repeat="item in main.items">
                    <td>{{item.name}}</td>
                    <td>{{item.price | currency}}</td>
                    <td>{{item.quantity}}</td>
                    <td>
                        <button ng-click="main.increaseItemAmount(item)">+</button>
                        <button ng-click="main.decreaseItemAmount(item)">-</button>
                        <button ng-click="main.addToCart(item)" ng-show="item.showAddToCart && !item.addedToCart">Add to Cart</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div ng-controller="cartController as cart">
        <h2>Cart Controller</h2>
        <div>
            <table>
                <tr>
                    <td>Item</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    <td></td>
                </tr>
                <tr ng-repeat="item in cart.cartStorage.items">
                    <td>{{item.name}}</td>
                    <td>{{item.price | currency}}</td>
                    <td>{{item.quantity}}</td>
                    <td>
                        <button ng-click="cart.increaseItemAmount(item)">+</button>
                        <button ng-click="cart.decreaseItemAmount(item)">-</button>
                        <button ng-click="cart.removeFromCart(item)">Remove from Cart</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

然后修改控制器中的代码以使用服务的.factory('cartStorage', function() { var _cart = { items: [] }; var service = { get cart() { return _cart; } } return service; })属性而不是值。您只需要在两个控制器中更改一行代码。变化：

.cart

为：

_this.cartStorage = cartStorage;

Here is an updated JSFiddle

Answer 2

您可以在产品详细信息和购物车详细信息控制器之间拥有共享服务，该控制器可以有一个阵列，您可以在其中按下数量和其他详细信息来推送所选产品。

Answer 3

我以this plunker为例。

我已经使用事件来达到理想的行为。（这只是一种方法，应该有很多可能性）

的ProductsController：

app.controller('ProductsCtrl', function($scope, $rootScope) {
    $scope.products = [
        {
            'name': 'Product One',
            'price': 10,
            'qty': 0
        },
        {
            'name': 'Product two',
            'price': 20,
            'qty': 0
        }
    ];

    // Fire event to add
    $scope.add = function(product) {
        product.qty++;
        $rootScope.$broadcast('addProduct', product.price);
    }

    // Fire event to remove
    $scope.remove = function(product) {
        if(product.qty > 0) {
            product.qty--;
            $rootScope.$broadcast('removeProduct', product.price);
        }
    }
});

CartController：

app.controller('CartCtrl', function($scope) {
    $scope.total = 0;

    // Catch the event to add
    $scope.$on('addProduct', function(event, data) {
       $scope.total += data;
    });

    // Catch the event to remove
    $scope.$on('removeProduct', function(event, data) {
        $scope.total -= data;   
    });
});

查看：

<div ng-controller="CartCtrl">Total: {{total}}</div>
<br>
<div ng-controller="ProductsCtrl">
    <div ng-repeat="product in products">
        <span>Name: {{product.name}}</span>
        <br>
        <span>Price:{{product.price}}</span>
        <span>Quantity:{{product.qty}}</span>
        <br>
        <button type="button" ng-click="add(product);">Add</button>
        <button type="button" ng-click="remove(product);">Remove</button>
        <br><br><br>
    </div>
</div>

如何将产品添加到购物车，然后从产品页面和购物车本身更新数量。

3 个答案: