0

Пытаюсь написать небольшое приложение на angular для интернет-магазина.

Сейчас в приложении одна директива ng-repeat проходит по всем товарам в категории, и когда пользователь нажимает кнопку купить, индекс товара - $index отсылается в контроллер, и в модели фиксируется факт покупки.

Хочу чтобы в приложении была возможность разбивки товаров на категории с возможностью отсылки в контроллер номера категории и номера товара в категории, но не знаю, возможно ли в ангуляре получить оба индекса в разные переменные.

Буду благодарен за Ваши подсказки.

2 ответа 2

2

Возможно использовать одновременно индексы вложенных ng-repeat. Для этого каждому из них в ng-init нужно присвоить алиас.
Например:

<div ng-repeat="category in categories" ng-init="categoryIndex=$index">
    <div ng-repeat="product in category.products" ng-init="productIndex=$index">
        category index: {{categoryIndex}}<br/>
        product index: {{productIndex}}
    </div>
</div>

Ссылка на пример в документации для директивы ng-init

2
  • Проще использовать обращение к внешнему $index через $parent. $parent.$index 10 янв 2017 в 11:32
  • @ДмитрийРодевич, не проще, нужно всегда знать кто является парентом.
    – Grundy
    10 янв 2017 в 11:48
1

Не понятно как у Вас реализованы категории с продуктами, но все действия можно вписать в клик по кнопке Купить товар. Например, следующим образом:

HTML

<ul>
    <li ng-repeat="product in products">
        // some product code..
        <button ng-click="addProduct($index, product.id, product.cat.id)">
            Купить продукт
        </button>
    </li>
</ul>

JS

app.controller('productCtrl', [function(){
    $scope.cart = []; //корзина
    $scope.addProduct = function(index, productId, catId) {
        $scope.cart[index] = {'product':productId, 'cat':catId};
    };  
}]);

Получить оба индекса в разные переменные возможно также по клику на кнопку ($scope.productId и $scope.productCatId - переменные из скопа контроллера):

// ...
<button ng-click="productId=product.id; productCatId=product.cat.id;">
    Купить продукт
</button>
// ...

Детали уже добивайте согласно Вашей реализации.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.