向购物车中添加一个项目
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}
];
});
如果有人能指出我做错了什么，我将非常感激。
这是代码依赖:http://codepen.io/summerfreeze/pen/VjqJYW
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所解释的，你只能通过index来访问数组元素。
我能看到的另一个错误是，当点击"添加到购物车"按钮时，你试图将"jsonCartItem"推到主集合"$范围"中。产品"，这是错误的。
"美元范围。
应该再初始化一个作用域变量，如下
所示$scope.addedItems = [];
然后可能
$scope.addedItems.push(jsonCartItem);
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>
你的代码中有一些错误
像美元范围。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数组中指定所选产品。
相关文章：
- 当在Ember中点击一个项目时，我如何将一个活动类添加到项目列表中
- angularjs移除焦点上的活动类并添加到下一个项目
- 如何通过AngularJS删除一个项目
- 获取每个项目中不为 null 的最后一个项目
- 在另一个项目中使用大理石测试rxjs5方法
- Asp.net 引导下拉菜单 - 选择一个项目
- 处理一个项目，想要添加以下菜单栏，并尽量减少向下滑动
- 在angularJs的选择框中预先选择一个项目
- jQuery 使用 ID 作为 URL 选择一个项目
- 我在Phaser有一个项目.我想在画布上的元素上做一个用户图像编辑器
- Javascript:使用 slice(） 从数组中选择除一个项目之外的所有项目
- 如何从包含1000个项目的数组中随机选择一个项目
- 从列表中选择一个项目，
- 在可排序的JQuery UI列表中至少保留一个项目
- 仅单击一行中的一个项目
- 在angularjs中一次选择一个项目
- 有没有更花哨的方法可以在同一类中获得上一个项目
- 如何从用户制作的数组中具体拼接出一个项目
- 角度 - ng 网格通过分组按语法选择下一个/上一个项目
- 是否可以通过使用 javascript 获取数组中的一个项目来删除项目
