将商品添加到购物车。角度js,离子

时间:2016-06-29 12:57:49

标签: angularjs

尝试在应用中的产品详细信息页面中获取产品,以便在购物车中进行编译。该按钮工作并指向购物车页面,但不显示产品或任何详细信息。

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;
}
};
});

0 个答案:

没有答案