카트에 제품을 추가 한 다음 제품 페이지와 카트 자체에서 수량을 업데이트하는 방법.

Question

나는 아래의 웹 사이트가 성취 한 구체적인 것을 달성하는 방법을 완전히 뒤죽박죽입니다. 누구든지 제품 세부 정보 페이지에서 장바구니로 제품 수량을 업데이트하는 방법을 알고 있으며 장바구니와 해당 제품과 컬렉션에서 반복되는 각 제품에 대한 제품 세부 정보 페이지간에 수량을 공유/바인딩해야합니다. (나는 단순한 커스텀 지시문을 통해 글로벌 카트 수량을 가지고있는 것에 대해 이야기하는 것이 아니다.) 아래 링크를 참조하십시오. 카트에 제품을 추가 한 다음 제품 페이지와 카트 자체에서 수량을 업데이트하십시오. 이것이 내가 성취하려고하는 것입니다. 미리 감사드립니다.

http://demo.shopnx.in/

Answer 1

일반적으로 시도한 코드를 게시 한 다음 잘못된 방향으로 안내하도록 요청하면 더 나은 응답을 얻을 수 있습니다. 이 작업을 수행하는 한 가지 방법을 보여주기 위해 간단한 JSFiddle을 만들었습니다. 그것은 매우 단순하고 인위적이며, 상상력에 의해 가치가있는 생산이 아니며 실제로 많은 것을하지는 않습니다. 그러나 당신이 한 기능을 수행 할 수있는 하나의 구조를 보여 주어야합니다.

키는 공유 저장소의 유형을 사용하여 제품 목록과 장바구니에 동일한 항목 배열을 사용할 수 있도록하는 것입니다. 지금

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

:

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

뿐만 아니라 카트 컨트롤러 :이 값은 그 다음 주제어 부에 주입

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

: 샘플에서 I이 사용하여 값을 행한 cartStorage 개체가 공유되므로 한 컨트롤러에서 만든 모든 업데이트가 자동으로 다른 컨트롤러에 반영됩니다.

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

에 :

_this.cartStorage = cartStorage.cart; 

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>