добавить товар в корзину

Я делаю небольшое приложение, которое ищет элемент из списка, отображает его цену и умножает его на количество. Ниже я добавил кнопку добавления. Теперь я хочу, чтобы элемент с его ценой и количеством добавлялся под кнопкой (чтобы сделать что-то вроде корзины покупок, в основном), но я борюсь с кодом, он не работает.добавить товар в корзину

Вот код:

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

Вы хотите добавить добавить товар it' $ scope.products' в корзину? –

Я сделаю код, так что вы увидите, что я хочу точно сделать – 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

Я добавил кодэпен, чтобы вы могли лучше визуализировать то, что я пытаюсь сделать – 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

Это тоже не работает. Я добавил кодировщик, чтобы вы могли лучше визуализировать то, что я пытаюсь сделать. – summerfreeze

вы сделали некоторые ошибки в кодефене, измените эту строку $ scope.selectedItem.push (jsonCartItem) с помощью $ scope.selectedItems.push (jsonCartItem); nd объявить переменную $ scope.selectedItems = []; внутри контроллера –

Я сделал, но все еще ничего – summerfreeze

добавить товар в корзину

ответ

Смежные вопросы