ng-click для конкретного товара
Здрасте, такая проблемка, кликаю на
<button class="btn btn-warning" ng-click="productController.counter(1);">+</button> и количество суммируеться во всех продуктах, а надо только в том по котором клинул, спасибо. (удалил некоторый html чтоб укоротить)
<div class="container" ng-controller="ProductController as productController">
<div class="row">
<div class="col-md-6" ng-repeat="x in productController.productDetails">
<product-card></product-card>
</div>
</div>
</div>
ProductCard:
<div class="product-card">
<div class="row product-content">
<div class="col-sm-9 col-xs-8">
<div class="row">
<div class="col-sm-8 col-xs-12">
<h2 class="product-title">{{x.name}}</h2>
<p class="product-description"></p>
<ul>
<li class="product-description"><i class="fa fa-check"></i> {{x.options.opt1}}</li>
</ul>
</div>
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-sm-12 col-xs-6">
<div class="input-group count-selector">
<div class="counter-value"> {{productController.count}} <span></span></div>
<span class="input-group-btn"><button class="btn btn-warning" ng-click="productController.counter(1);">+</button></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
var order = angular.module('order', []);
order.directive('productCard', function(){
return {
restrict: 'E',
templateUrl: 'product-card.html'
};
});
order.controller('ProductController', function (ProductService) {
this.productDetails = ProductService.getDetails();
this.count = 1;
this.counter = function(x){
this.count += x;
}
});
order.service('ProductService', function () {
var productDetails = [
{
name : 'Пиджак',
price: '50',
options: {
opt1: 'Химчистка',
opt2: 'Отпаривание'
}
},
{
name : 'Пиджак',
price: '80',
options: {
opt1: 'Химчистка',
opt2: 'Отпаривание'
}
}
];
this.getDetails = function () {
return productDetails;
}
});
|
mariklozik,
<!DOCTYPE html>
<html lang="en" ng-app='order'>
<head>
<meta charset="UTF-8">
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
</head>
<body>
<div class="container" ng-controller="ProductController as productController">
<div class="row">
<div class="col-md-6" ng-repeat="x in productController.productDetails">
<div class="product-card">
<div class="row product-content">
<div class="col-sm-9 col-xs-8">
<div class="row">
<div class="col-sm-8 col-xs-12">
<h2 class="product-title">{{x.name}}</h2>
<p class="product-description"></p>
<ul>
<li class="product-description"><i class="fa fa-check"></i> {{x.options.opt1}}</li>
</ul>
</div>
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-sm-12 col-xs-6">
<div class="input-group count-selector">
<div class="counter-value"> {{x.counter}} <span></span></div>
<span class="input-group-btn"><button class="btn btn-warning" ng-click="productController.counter($index);">+</button></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var order = angular.module('order', []);
order.directive('productCard', function(){
return {
restrict: 'E',
templateUrl: 'product-card.html'
};
});
order.controller('ProductController', function (ProductService) {
this.productDetails = ProductService.getDetails();
var self = this;
this.counter = function(index){
self.productDetails[index].counter += 1;
}
});
order.service('ProductService', function () {
var productDetails = [
{
name : 'Пиджак',
price: '50',
options: {
opt1: 'Химчистка',
opt2: 'Отпаривание'
},
counter: 1
},
{
name : 'Пиджак',
price: '80',
options: {
opt1: 'Химчистка',
opt2: 'Отпаривание'
},
counter: 1
}
];
this.getDetails = function () {
return productDetails;
}
});
</script>
</body>
</html>
|
Спасибо тебе добрый человек, работает)))
Будем дальше разбираться |
| Часовой пояс GMT +3, время: 06:15. |