尝试在应用中的产品详细信息页面中获取产品,以便在购物车中进行编译。该按钮工作并指向购物车页面,但不显示产品或任何详细信息。
Product_detail.html -
<ion-modal-view>
<ion-content class="header-background">
<ion-header-bar align-title="center">
<h1 class="title">{{cate.name}}</h1>
<button class="button button-clear button-icon icon ion-android-close" ng-click="closeModal()"></button>
</ion-header-bar>
<form>
<div class="product-header" style="background: url({{product.imgLg}}) no-repeat; background-size: cover;">
<h2 class="product-name">{{product.name}}</h2>
<div class="product-price">{{product.price}}</div>
<div class="product-like">
<button class="button button-clear" ng-click="doLike()">
<i class="ion-heart"></i>
</button>
</div>
</div>
<div class="product-body">
<div class="product-info">
Efficiently customize corporate sources after user-centric internal or "organic".
</div>
<div class="product-quantity">
<label class="item item-input">
<input type="text" placeholder="Enter Quantity Here...">
</label>
</div>
<div class="add-to-cart">
<button class="button button-block button-balanced" ng-click="doOrder({{product.id}})">
Add to Cart
</button>
</div>
<div class="add-to-favorites">
<button class="button button-block button-dark">
Add to Favorites
</button>
</div>
</div>
</form>
</ion-content>
购物车。 html。
<ion-view view-title="Shopping cart">
<ion-header-bar align-title="center" class="bar-light">
<ion-nav-bar align-title="center">
<ion-nav-buttons>
<button class="button button-clear button-icon" ng-click="goBack()" ><i class="ion-chevron-left"></i></button>
</ion-nav-buttons>
</ion-nav-bar>
</ion-header-bar>
<ion-content>
<div class="cate-lv2">
<div class="card cate-lv2-item" ng-repeat="carts" ng-controller="ProductMenuCtrl">
<div class="item item-thumbnail-left item-text-wrap">
<img ng-src={{product.img}} />
控制器
//function to add the product to the shopping cart
$scope.doOrder = function ($id) {
$state.go("app.shopping_cart");
$timeout(function () {
$scope.closeModal();
});
};
**This is the services.js**
**Values for the service** in service.js
app.factory('Cates', function() {
//This is where you change the product menu front page info.
app.factory('Cates', function() {
//This is where you change the product menu front page info.
var cates = [{
id: 4,
class: 'item-5',
img: 'img/category/5.jpg',
name: 'Special drinks',
lastText: 'Enthusiastically architect.'
}];
return {
all: function() {
return cates;
},
get: function(cateId) {
for (var i = 0; i < cates.length; i++) {
if (cates[i].id === parseInt(cateId)) {
return cates[i];
}
}
return null;
}
};
});
app.service('Products', function() {
var products = [{
id: 5,
cateId: 0,
img: 'img/product/thumb6.jpg',
imgLg: 'img/product/6.jpg',
name: 'BROWN RICE WITH GARLIC AND LIME',
price: '$5.00',
like: '738'
}, {
id: 6,
cateId: 0,
img: 'img/product/thumb7.jpg',
imgLg: 'img/product/7.jpg',
name: 'OMELETTE WITH ASPARAGUS, BEANS AND THYME',
price: '$24.00',
like: '1029'
}, {
id: 7,
cateId: 1,
img: 'img/product/thumb8.jpg',
imgLg: 'img/product/8.jpg',
name: 'FRIED MASHED POTATOES',
price: '$24.00',
like: '1029'
}];
return {
all: function() {
return products;
},
get: function(productId) {
for (var i = 0; i < products.length; i++) {
if (products[i].id === parseInt(productId)) {
return products[i];
}
}
return null;
},
getByCate: function(cateId) {
var product_cate = [];
for (var i = 0; i < products.length; i++) {
if (products[i].cateId === parseInt(cateId)) {
product_cate.push(products[i]);
}
}
return product_cate;
}
};
});
app.service('Carts', function() {
var carts = [{
id: 0,
cateId: 0,
img: 'img/product/thumb1.jpg',
imgLg: 'img/product/1.jpg',
name: 'BEET ROOT AND RED BEAN VEGAN BURGERS',
price: '$10.00',
qty: '3'
}, {
id: 8,
cateId: 1,
img: 'img/product/thumb9.jpg',
imgLg: 'img/product/9.jpg',
name: 'CREAMY MUSHROOM SOUP',
price: '$35.00',
qty: '4'
}];
return {
all: function() {
return carts;
}
};
});