Angularjs 使用angular js添加到购物车

我想使用angular js创建购物车。我是angular js的新手。我的问题是如何使用购物车功能。现在，我使用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>

{{product.productname}-{{product.id}
${{product.price}

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

您可以使用来保存您的购物车数据

例如，您可以在AngularJS应用程序中使用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:

是它如何工作的任何示例。假设我单击“添加到购物车”，它将如何存储数据以及如何访问数据。

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

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