添加到购物车使用角js

Question

我想使用角度js创建购物车。我是角度j的新手。我的问题是如何使用购物车功能截至目前我使用REST API显示产品列表

<div class="col-sm-2" ng-repeat="product in productdata">
  <div class="col-item">
    <div class="photo">
      <a ng-href="#/productdesc">
        <img src="{{product.imageUrl}}" class="img-responsive" alt="a" />
      </a>
    </div>
    <div class="info">
      <div class="row">
        <div class="col-md-12">
          <h5>{{product.productname}}-{{product.id}}</h5>
          <h5 class="price-text-color">${{product.price}}</h5>
        </div>
      </div>
      <div class="separator clear-left">
        <p class="btn-add">
          <input type="number" value="1" class="form-control text-center" min="1">
        </p>
        <p class="btn-details">
          <a href="#" class="hidden-sm btn btn-group-sm btn-primary">
            <i class="fa fa-shopping-cart"></i>Add
          </a>
        </p>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

我需要知道如何将值保存为浏览器中的cookie或会话。

Answer 1

您可以使用localStorage or sessionStorage来节省推送购物车数据。

例如，您可以使用像angular-local-storage这样的包来处理AngularJS应用中的sessionStorage。

<强>更新：

免责声明：我没有测试过此代码！只是一个示例代码，向您展示您可以遵循的方式。祝好运！ ：）

在您的应用config中：

myApp.config(function (localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('yourAppName');
  localStorageServiceProvider
    .setStorageType('sessionStorage');
});

服务：

myApp.factory('CartProduct', function(localStorageService) {
  var cartProducts = [];

  function init() {
    if (localStorageService.get('cart-products').length) {
      cartProducts = localStorageService.get('cart-products');
    }
  }

  init();

  function getAll() {
    return cartProducts;
  }

  function add(product) {
    cartProducts.push(product);
    localStorageService.set('cart-products', cartProducts);
  }

  return {
    add: add,
    getAll: getAll
  };
});

控制器：

myApp.controller('MyCtrl', function($scope, CartProduct) {
  $scope.addToCart = function (product) {
    CartProduct.add(product);
  }
});

HTML：

  <div class="separator clear-left">
    <p class="btn-add">
      <input type="number" ng-model="product.quantity" value="1" class="form-control text-center" min="1">
    </p>
    <p class="btn-details">
      <a href="#" ng-click="addTocart(product)" class="hidden-sm btn btn-group-sm btn-primary">
        <i class="fa fa-shopping-cart"></i>Add
      </a>
    </p>
  </div>