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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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