將商品添加到購物車

我正在製作一個小應用程序，用於從列表中搜索項目，顯示價格並將其乘以數量。在那之下我添加了一個添加按鈕。現在我想要在該按鈕下添加其價格和數量的商品（基本上就像購物車一樣），但是我正在努力處理代碼，它不起作用。將商品添加到購物車

下面的代碼：

<!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

來源

2016-08-12 summerfreeze

代碼是沒有意義的。 '$ scope.products'是一個數組，它沒有'.name'，'.price'等等。你*可能*希望'selectedItem'代替。 – Claies

您是否想將添加項目添加到$ scope.products到購物車？ –

我會做一個codepen，所以你會看到我想要的東西 – summerfreeze

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沙解釋的那樣，可以只通過使用索引訪問數組元素。

我可以看到的另一個錯誤是，當點擊「添加到購物車」按鈕時，您試圖將「jsonCartItem」推入主集合「$ scope.products」，這是錯誤的。

「$ scope.products」是項目的主集合。

你應該初始化一個更大的空間可變類似下面

$scope.addedItems = [];

，然後可能

$scope.addedItems.push(jsonCartItem);

來源

2016-08-12 07:33:28

我添加了一個codepen，以便更好地可視化我想要做的事 – summerfreeze

太棒了！這正是我想要做的。 – summerfreeze

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

更改代碼中的這些行，並指定產品數組中的選定產品。

來源

2016-08-12 07:23:22

它也不起作用。我添加了一個codepen，以便更好地可視化我想要做的事情。 – summerfreeze

你在codepen中犯了一些錯誤，用$ scope.selectedItems.push（jsonCartItem）;改變這一行$ scope.selectedItem.push（jsonCartItem）; nd聲明變量 $ scope。selectedItems = [];內部控制器 –

我做了，但仍然沒有 – summerfreeze

將商品添加到購物車

回答

相關問題