Question

我正在制作一个小应用，从列表中搜索项目，显示它的价格并将其乘以数量。下面我添加了一个添加按钮。现在我希望项目的价格和数量添加到按钮下（基本上可以像购物车一样），但是我在努力学习代码，它不起作用。

以下是代码：

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

Answer 1

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

Answer 2

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

var itemName = $scope.products[0].name;
var itemPrice = parseInt($scope.products[0].price);
var itemQty = parseInt($scope[0].quantity);
var totalPrice = parseInt(itemPrice * itemQty);

＆＃13;

你在代码中犯了一些错误

就像$ scope.products是数组一样，没有索引就无法访问它您应该指定要添加的产品

例如，我在这里使用0索引，因此每次它都会从产品数组中获得第一个产品。

oc new-app --template=postgresql-persistent \
-p POSTGRESQL_USER=admin,POSTGRESQL_PASSWORD=redhat,POSTGRESQL_DATABASE=gitlab

更改代码中的这些行，并在products数组中指定所选产品。

将商品添加到购物车

2 个答案: