【发布时间】：2016-12-19 02:46:17
【问题描述】：
我正在制作一个小应用程序，它可以从列表中搜索一个项目，显示它的价格并将其乘以数量。在其下方，我添加了一个添加按钮。现在我希望在按钮下添加带有价格和数量的商品（基本上可以制作类似购物车的东西），但我正在努力处理代码，它不起作用。
代码如下：
<!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}
];
});
如果有人能指出我做错了什么，我将不胜感激。
【问题讨论】：
-
该代码没有意义。
$scope.products是一个数组，它没有.name、.price等。您可能想要selectedItem。 -
你想把它
$scope.products的商品添加到购物车吗？ -
我会做一个代码笔，这样你就会看到我到底想要做什么
-
我在我的问题中添加了一个codepen
-
您的代码运行良好。你到底想做什么？您正在将商品添加到购物车，但没有显示您正在寻找的商品？
标签： javascript angularjs