我在向购物车添加产品(播放列表)时遇到问题。我无法理解这背后的原因。我是离子框架和角度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);
}
});
};