使用 angular js 添加到购物车

Question

我想使用 angular 创建购物车 js.And 我是 angular 的新手 js.My 问题是如何使用购物车功能目前我显示了使用 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>

使用 angular js 添加到购物车

Add to cart using angular js

shopping-cart

angularjs