將項目添加到購物車
[英]add an item to cart
問題描述
我正在制作一個小型應用程序，它從列表中搜索商品，顯示其價格並將其乘以數量。 在此之下，我添加了一個添加按鈕。 現在，我希望將帶有價格和數量的商品添加到按鈕下方（基本上是做成購物車之類的東西），但是我在代碼中苦苦掙扎，它不起作用。
這是代碼：
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-cloak>
<head>
<meta charset="utf-8">
<title>app</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
<link rel="stylesheet" href="./style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic, 700italic' rel='stylesheet' type='text/css'>
</head>
<body layout="column" ng-controller="autoCompleteController">
<div>
<h1>Purchase Order</h1>
<div>
<div layout="row">
<div flex><h4>Name</h4></div>
<div flex><h4>Quantity</h4></div>
<div flex><h4>Price</h4></div>
<div flex><h4>Total</h4></div>
</div>
<div layout="row">
<div flex>
<md-autocomplete flex
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in querySearch(searchText)"
md-item-text="item.name"
placeholder="Product name"
md-min-length="0">
<span md-highlight-text="searchText">{{item.name}}</span>
</md-autocomplete>
</div>
<div flex>
<md-input-container md-no-float class="md-block">
<input ng-model="quantity" placeholder="Quantity">
</md-input-container>
</div>
<div flex><p>{{selectedItem.price}}</p></div>
<div flex><p>{{quantity * selectedItem.price}}</p></div>
</div>
<div>
<p>{{jsonCartItem.name}}</p>
<p>{{jsonCartItem.price}}</p>
<p>{{jsonCartItem.qty}}</p>
<p>{{jsonCartItem.totAmt}}</p>
</div>
<md-button class="md-raised" ng-click="AddInCart()">Add item</md-button>
</div>
</div>
<script src="../src/api.js"></script>
</body>
</html>
和JS：
var myApp = angular.module('myApp', ['ngMaterial']);
myApp.controller('autoCompleteController', function($scope) {
$scope.querySearch = function() {
return $scope.products.filter(p => p.name.toLowerCase().includes($scope.searchText));
};
$scope.AddInCart = function() {
var itemName = $scope.products.name;
var itemPrice = parseInt($scope.products.price);
var itemQty = parseInt($scope.quantity);
var totalPrice = parseInt(itemPrice * itemQty);
var jsonCartItem = {
'name' : itemName,
'price' : itemPrice,
'qty' : itemQty,
'totAmt' : totalPrice
};
$scope.products.push(jsonCartItem);
};
$scope.products = [
{name:"Worn Shortsword",price:3}
/*4000 other products here */
,{name:"Annealed Blade",price:12980}
];
});
如果有人能指出我在做什么錯，我將不勝感激。
這是codepen： http ://codepen.io/summerfreeze/pen/VjqJYW
2 個解決方案
解決方案1
1 已采納 2016-08-12 07:33:28
var myApp = angular.module('myApp', ['ngMaterial']); myApp.controller('autoCompleteController', function($scope) { $scope.selectedItems = []; $scope.querySearch = function() { return $scope.products.filter(p => p.name.toLowerCase().includes($scope.searchText)); }; $scope.AddInCart = function() { var itemName = $scope.selectedItem.name; var itemPrice = parseInt($scope.selectedItem.price); var itemQty = parseInt($scope.quantity); var totalPrice = parseInt(itemPrice * itemQty); var jsonCartItem = { 'name' : itemName, 'price' : itemPrice, 'qty' : itemQty, 'totAmt' : totalPrice }; $scope.selectedItems.push(jsonCartItem); console.log($scope.selectedItems); }; $scope.products = [ {name:"Worn Shortsword",price:3} ,{name:"Bent Staff",price:4} ,{name:"Worn Mace",price:3} ,{name:"Worn Axe",price:3} ,{name:"Revelosh's Armguards",price:4500} ,{name:"Revelosh's Spaulders",price:6725} ,{name:"Revelosh's Gloves",price:4534} ,{name:"The Shoveler",price:16164} ,{name:"Annealed Blade",price:12980} ]; });
body { max-width: 720px; background: #eee; margin: 2em auto; font-family: 'Open Sans', sans-serfi; } div.row > * { width: 24%; display: inline-block; } div.row { position: relative; } div.row > *:nth-child(n + 3) { text-align: right; } button { margin-top: 1em; } input { padding: 0.4em; } md-autocomplete { width: 80%; }
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> <html lang="en"> <body ng-app="myApp" ng-cloak ng-controller="autoCompleteController" layout="column" > <div> <h1>Purchase Order</h1> <div> <div layout="row"> <div flex><h4>Name</h4></div> <div flex><h4>Quantity</h4></div> <div flex><h4>Price</h4></div> <div flex><h4>Total</h4></div> </div> <div layout="row"> <div flex> <md-autocomplete flex md-selected-item="selectedItem" md-search-text="searchText" md-items="item in querySearch(searchText)" md-item-text="item.name" placeholder="Product name" md-min-length="0"> <span md-highlight-text="searchText">{{item.name}}</span> </md-autocomplete> </div> <div flex> <md-input-container md-no-float class="md-block"> <input ng-model="quantity" placeholder="Quantity"> </md-input-container> </div> <div flex><p>{{selectedItem.price}}</p></div> <div flex><p>{{quantity * selectedItem.price}}</p></div> </div> <div> <p>{{jsonCartItem.name}}</p> <p>{{jsonCartItem.price}}</p> <p>{{jsonCartItem.qty}}</p> <p>{{jsonCartItem.totAmt}}</p> </div> <md-button class="md-raised" ng-click="AddInCart()">Add item</md-button> </div> <h4>Added Items</h4> <table> <tr ng-repeat="item in selectedItems"> <td>{{item.name}}</td> <td>{{item.qty}}</td> <td>{{item.totAmt}}</td> </tr> </table> </div> <script src="../src/api.js"></script> </body>
正如@Dinesh Shah解釋的那樣，您只能使用索引來訪問數組元素。
我可能看到的另一個錯誤是，單擊“添加到購物車”按鈕時，您試圖將“ jsonCartItem”推入主集合“ $ scope.products”，這是錯誤的。
“ $ scope.products”是項目的主集合。
您應該再初始化一個范圍變量，如下所示
$scope.addedItems = [];
然后可能
$scope.addedItems.push(jsonCartItem);
解決方案2
0 2016-08-12 07:23:22
var myApp = angular.module('myApp', ['ngMaterial']); myApp.controller('autoCompleteController', function($scope) { $scope.selectedItems = []; $scope.querySearch = function() { return $scope.products.filter(p => p.name.toLowerCase().includes($scope.searchText)); }; $scope.AddInCart = function() { var itemName = $scope.selectedItem.name; var itemPrice = parseInt($scope.selectedItem.price); var itemQty = parseInt($scope.quantity); var totalPrice = parseInt(itemPrice * itemQty); var jsonCartItem = { 'name' : itemName, 'price' : itemPrice, 'qty' : itemQty, 'totAmt' : totalPrice }; $scope.selectedItems.push(jsonCartItem); console.log($scope.selectedItems); }; $scope.products = [ {name:"Worn Shortsword",price:3} ,{name:"Bent Staff",price:4} ,{name:"Worn Mace",price:3} ,{name:"Worn Axe",price:3} ,{name:"Revelosh's Armguards",price:4500} ,{name:"Revelosh's Spaulders",price:6725} ,{name:"Revelosh's Gloves",price:4534} ,{name:"The Shoveler",price:16164} ,{name:"Annealed Blade",price:12980} ]; });
body { max-width: 720px; background: #eee; margin: 2em auto; font-family: 'Open Sans', sans-serfi; } div.row > * { width: 24%; display: inline-block; } div.row { position: relative; } div.row > *:nth-child(n + 3) { text-align: right; } button { margin-top: 1em; } input { padding: 0.4em; } md-autocomplete { width: 80%; }
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> <html lang="en"> <body ng-app="myApp" ng-cloak ng-controller="autoCompleteController" layout="column" > <div> <h1>Purchase Order</h1> <div> <div layout="row"> <div flex><h4>Name</h4></div> <div flex><h4>Quantity</h4></div> <div flex><h4>Price</h4></div> <div flex><h4>Total</h4></div> </div> <div layout="row"> <div flex> <md-autocomplete flex md-selected-item="selectedItem" md-search-text="searchText" md-items="item in querySearch(searchText)" md-item-text="item.name" placeholder="Product name" md-min-length="0"> <span md-highlight-text="searchText">{{item.name}}</span> </md-autocomplete> </div> <div flex> <md-input-container md-no-float class="md-block"> <input ng-model="quantity" placeholder="Quantity"> </md-input-container> </div> <div flex><p>{{selectedItem.price}}</p></div> <div flex><p>{{quantity * selectedItem.price}}</p></div> </div> <div> <p>{{jsonCartItem.name}}</p> <p>{{jsonCartItem.price}}</p> <p>{{jsonCartItem.qty}}</p> <p>{{jsonCartItem.totAmt}}</p> </div> <md-button class="md-raised" ng-click="AddInCart()">Add item</md-button> </div> </div> <script src="../src/api.js"></script> </body>
您在代碼中犯了一些錯誤
像$ scope.products是數組，沒有索引就無法訪問它，您應該指定要添加的產品
例如在這里我使用0索引，因此每次它將從產品數組中獲得第一個產品。
var itemName = $scope.products[0].name;
var itemPrice = parseInt($scope.products[0].price);
var itemQty = parseInt($scope[0].quantity);
var totalPrice = parseInt(itemPrice * itemQty);
更改代碼中的這些行，並在products數組中指定選定的產品。
如何將商品添加到購物車
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.