Question

我正在尝试创建购物车，点击其添加到购物车的其中一个产品。所以，我构建了一个包含所有产品的Object，以及另一个包含该数组的数组将包含所有单击的项目。当我试图从产品对象添加正确的选定项目的值时，我得到了未定义。

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

{{1}}

Answer 1

当您调用addToCart()时，该函数使用$scope.nameProduct上的内容，但这是一个空字符串。您已在addProduct()函数上清除它。

传递您要添加的产品的名称：

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

相应地改变你的功能：

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

Answer 2

您需要在addToCart函数中传递product对象，如下所示：

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>

另请注意，传入产品对象而不仅仅是字符串将允许您传递价格，您可以从中计算总价。

如何通过单击Angular从另一个对象向对象添加值

2 个答案: