将项目添加到购物车
[英]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.