将项目添加到购物车离子框架

时间:2016-07-24 10:07:33

标签: html angularjs ionic-framework

我在向购物车添加产品(播放列表)时遇到问题。我无法理解这背后的原因。我是离子框架和角度js的新手。 任何人都可以帮我解决这个问题。

这是我的cart.html代码

 <ion-view view-title="Cart">
<ion-content>
  <ion-list>


  <ion-item item-width = "50%" ng-repeat="product in cart track by $index"  >
  <p class='product-title'>Item: {{product.title}}  </p>  
  <p class='product-price'>Price:{{product.price}}</p> 
  <p class='product-amount'><input type = "number" min = "0" placeholder = "0" value = "0" ng-model = "amount"></p>
  <span class = 'product-total'>{{product.price*amount}}  </span>



   </ion-item>


</ion-list>
   <button class = "button button-small" ng-click = "payment()" >Proceed to  Payment </button> 
</ion-content>
</ion-view>

这是我的playlists.html代码

<ion-view view-title="Playlists">
  <ion-content>
 <ion-list>


 <ion-item item-width = "50%" ng-repeat="playlist in playlists track by $index" > 
 <div class = "row">
  <div class = "col">Item: {{playlist.title}}</div>
 <div class = "col">Price:{{playlist.price}}</di            </div>    
<ion-option-button class = "button-positive" ng-click =    "addtocart(playlist)" >Add to Cart</ion-option-button> 
 <ion-option-button class = "button-assertive" ng-click =  "removefromcart(playlist)" >Remove from Cart </ion-option-button> 

     </ion-item>

  </ion-list>

</ion-content>
</ion-view>

这是我对controllers.js的代码

 .controller('PlaylistsCtrl', function($scope) {
 $scope.playlists = [
{ title: 'Reggae', price: '10' , id: 1 },
{ title: 'Chill', price: '10', id: 2 },
{ title: 'Dubstep', price: '10', id: 3 },
{ title: 'Indie', price: '10', id: 4 },
{ title: 'Rap', price: '10', id: 5 },
{ title: 'Cowbell', price: '10' , id: 6 }
];

   $scope.cart = [];
  $scope.addtocart = function(playlist){


  var productInCart = false;
  $scope.cart.forEach(function(prod, index, prods){
    if (prod.id === playlist.id) {
      productInCart = prod;
      return;
    }
  });

  if (productInCart) {
    //do nothing
  } else {
    $scope.cart.push(playlist);
  }
};


 $scope.removefromcart = function(playlist){

$scope.cart.forEach(function(prod, i, prods){
    if (playlist.id === prod.id) {
      $scope.cart.splice(i, 1);

    }
  });

 };

0 个答案:

没有答案