我正在尝试创建购物车应用程序。对于此应用程序，目的是通过onclick()事件将产品添加到购物车。 ng-click功能。我遇到的问题是onclick()事件确实没有任何意义。至于说事件被调用但没有任何变化，控制台中没有错误。
所以，首先，我正在为此应用程序使用prestashop webservice。 webservice是一个连接到现有prestashop安装的rest API。
首先，我将展示包含产品的HTML。在这种情况下，ng-repeat和bind / value选项是来自数据库（$http.get）的数据。使用ng-model我能够获取数据。 （创建了一个带警报的测试。
这是我的HTML
// Cart system
myApp.controller('CartController', function($http, $scope) {
// Get the products and cart products
$http.get('config/get/getProducts.php').then(function(response){
$scope.products = response.data.products.product
});
});<div ng-controller="CartController">
<div class="input-group col-xl-6 col-lg-8 col-sm-10 padding-t-20 padding-l-100">
<span class="bc-f3f3f3 no-border input-group-addon">
<svg width="20px" height="20px" fill="none" stroke="#000000" stroke-width="4" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="18" x2="30" y1="18" y2="30"/>
</svg>
</span>
<input type="text" class="bc-f3f3f3 form-control no-border" ng-model="productname" placeholder="{{ 'Zoek of scan producten' | translate }}" aria-describedby="basic-addon1">
</div>
<div class="align-center tcolor-2a95cf text-center padding-t-25 padding-s-45 no-margin row">
<div ng-if="product.active == 1" class="productimg col-4" ng-repeat="product in products | filter:productname | orderBy: 'name'">
<img ng-value="{{reference}}" data-toggle="modal" data-target=".bd-example-modal-sm{{product.id}}" ng-value="{{ean13}}" alt="{{product.name.language}}" src="https://sdwebdesign.nl/prestademo/{{product.id}}-home_default/{{product.name.language}}.jpg" class="img-responsive"/>
<p ng-bind="product.name.language"></p>
<div class="modal fade bd-example-modal-sm{{product.id}}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content product-modal">
<div class="modal-header product-modal-header no-border">
<div class="container">
<ng-form name="products" ng-controller="CartController">
<div class="row">
<div class="hidden col-12 product">
<h3 title="product_id" type="number" id="product_id" aria-describedby="" ng-model="product.id" ng-bind="product.id" ng-value="product.id"></h3>
</div>
</div>
<div class="row">
<div class="col-12 product text-center">
<h3 title="product_name" id="product_name" aria-describedby="" ng-model="product.name.language" ng-bind="product.name.language" ng-value="product.name.language"></h3>
</div>
</div>
<div class="row">
<div class="no-padding product col-12">
<label class="d-flex">{{ 'Prijs: ' | translate }}</label>
<h3 title="product_price" type="text" id="product_price" aria-describedby="" class="form-control" ng-model="product.price" ng-bind="product.price"></h3>
</div>
</div>
<div class="row">
<div class="no-padding product col-12">
<label class="d-flex">{{ 'Kies uw maat' | translate }}</label>
<select title="product_size" type="text" name="product_size" id="product_size" class="form-control" ng-model="product.size" aria-describedby="">
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</div>
</div>
<div class="row">
<div class="no-padding product col-12">
<label class="d-flex">{{ 'Aantal:' | translate }}</label>
<input title="product_quantity" type="text" name="product_quantity" id="product_quantity" class="form-control" aria-describedby="" ng-model="product.quantity" value="1">
</div>
</div>
<div class="row margin-t-15">
<div class="col-lg-12">
<button class="btn-primary" ng-click="addToCart(product)" type="submit" value=" add ">
Toevoegen aan winkelwagen
</button>
</div>
</div>
</ng-form>
</div>
</div>
<div class="modal-footer no-border product-modal-footer">
<a data-dismiss="modal">{{ 'Sluit' | translate }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是获取数据并尝试推送产品的JS。 HTML就是购物车本身。
$scope.addToCart = function(product) {
var product_id = product.id;
var product_name = product.name.language;
var product_price = product.price;
var product_size = product.size;
var product_quantity = product.quantity;
$scope.cartProduct = {
id: product_id,
name: product_name,
price: product_price,
size: product_size,
quantity: product_quantity
};
$scope.cartProducts = [];
$scope.cartProducts.push(
$scope.cartProduct
);
$scope.cartProduct = {};
console.log(product_id + product_name + product_price + product_size + product_quantity);
angular.copy(product_name);
console.log(angular.copy(product_name));
};<div ng-repeat="cartProduct in cartProducts" class="row checkout margin-t-15">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<p>
id: {{cartProduct.id}}
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<p>
name: {{cartProduct.name}}
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<p>
quantity: {{cartProduct.quantity}}
</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<p>
Remove
</p>
</div>
</div>
为简化起见，完整的控制器是：
myApp.controller('CartController', function($http, $scope) {
// Get the products and cart products
$http.get('config/get/getProducts.php').then(function(response){
$scope.products = response.data.products.product
});
// Get the cart
$http.get('config/cart/getCart.php').then(function (response) {
$scope.carts = response.data.carts.cart
});
// Stock check
$http.get('config/get/getStock.php').then(function (response) {
$scope.stock_availables = response.data.stock_availables.stock_available
});
$scope.addToCart = function(product) {
var product_id = product.id;
var product_name = product.name.language;
var product_price = product.price;
var product_size = product.size;
var product_quantity = product.quantity;
$scope.cartProduct = {
id: product_id,
name: product_name,
price: product_price,
size: product_size,
quantity: product_quantity
};
$scope.cartProducts = [];
$scope.cartProducts.push(
$scope.cartProduct
);
$scope.cartProduct = {};
console.log(product_id + product_name + product_price + product_size + product_quantity);
angular.copy(product_name);
console.log(angular.copy(product_name));
};
});
所以我正在尝试将产品推向购物车。正如你所看到的，我已经尝试了一些我发现的其他推送示例，但遗憾的是那些不起作用。
请参阅此JSfiddle以获取示例
如果您有任何其他问题，请询问。
一如既往，提前致谢！