Форум

mariklozik · #1 (**permalink**) 26.01.2017, 17:22

Здрасте, такая проблемка, кликаю на

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

destus · #2 (**permalink**) 26.01.2017, 17:34

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>

mariklozik · #3 (**permalink**) 26.01.2017, 18:36

Спасибо тебе добрый человек, работает)))
Будем дальше разбираться

Форум

Справочник

Discord чат

Курсы javascript