如何通過單擊角度將對象從另一個對象添加到對象中

Question

我試圖創建購物車，當點擊其中一個產品時，將其添加到購物車。 因此，我構建了一個包含所有產品的對象，以及另一個包含所有點擊項目的數組。 當我試圖從產品對象中添加正確的選定項目的值時，我得到了未定義的值。

var app = angular.module('myApp',[]); app.controller("myCtrl",function ($scope) { 
 

 
     $scope.products = 
 
      [ 
 
       { name: 'Apple', price: 5, img: '/Apple.jpg' }, 
 
       { name: 'Banana', price: 3.7, img: '/Banana.jpg' }, 
 
       { name: 'Grapes', price: 10 , img:'/Grapes.jpg' } 
 
      ]; 
 
     $scope.addProduct= function() { 
 

 
      $scope.products.push({name:$scope.nameProduct, price:$scope.priceProduct, tmuna:$scope.imgProduct}); 
 
      $scope.nameProduct = ""; 
 
      $scope.priceProduct = ""; 
 
      $scope.imgProduct = ""; 
 

 
     }; 
 
     $scope.cartList = [{ name: 'Apple'}]; 
 
     $scope.addToCart = function() { 
 
      $scope.cartList.push({name:$scope.nameProduct}); 
 
      $scope.nameProduct = ""; 
 

 
     }; 
 

 

 
    });

 <div class="dropdown pull-right"> 
 
      <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown"> 
 
       Shopping Cart <span class="glyphicon glyphicon-shopping-cart"></span> 
 
       <span class="caret"></span></button> 
 
      <ul class="dropdown-menu" role="menu" aria-labelledby="menu1" ng-repeat="product in cartList"> 
 
       <li role="presentation"><a role="menuitem" tabindex="-1" >{{product.name}}</a></li> 
 
      </ul> 
 
     </div> 
 

 
     <form > 
 
      <p>Product: <input type = "text" ng-model = "nameProduct"></p> 
 
      <p>Price: <input type = "number" ng-model = "priceProduct"></p> 
 
      <p>Image: <input type = "text" ng-model = "imgProduct"></p> 
 
      <input type = "submit" value = "Add" ng-click = "addProduct()"> 
 
     </form> 
 
     
 
     </div> 
 
     
 
     <div class="product" ng-repeat="product in products"> 
 
      <img ng-src="{{product.img}}" /> 
 
      <div class="name">{{product.name}}</div> 
 
      <div class="price">${{product.price}}</div> 
 
      <p class="badge" ng-click="addToCart()">Add to<span class="glyphicon glyphicon-shopping-cart"></span></p> 
 
     </div>

Answer 1

當你調用addToCart()函數使用什麼對$scope.nameProduct，但是這是一個空字符串。你在addProduct()函數上清除它。

傳遞要添加的產品的名稱：

ng-click="addToCart(product.name)" 

並相應地改變你的函數：

$scope.addToCart = function (productName) { 
    $scope.cartList.push({ name: productName }); 
}; 

Answer 2

您需要通過產品對象在這樣的addToCart函數：

https://jsfiddle.net/Lyrjp92z/

JS

$scope.addToCart = function(product) { 
    $scope.cartList.push({ 
    name: product.name 
}); 
}; 

HTML

<p class="badge" ng-click="addToCart(product)">Add to<span class="glyphicon glyphicon-shopping-cart"></span></p> 

還要注意，通過在產品的對象，而不僅僅是字符串將讓你也通過在價格上，你可以計算出從總。