Как отделить несколько слайдеров изображений на angularjs друг от друга?

Question

[Дмитрий Соколов]

Добрый день!

Делаю вывод слайдеров изображений. Когда 1 слайдер все работает как нужно. Когда их несколько, то при клике в превью - меняются большие изображения у всех слайдеров. Нужно прописать уникальные переменные или как то иначе выйти из положения.

<div ng-controller="reviewCtrl">
        <div class="col-sm-6 col-xs-12" ng-repeat='review in reviews'>
            <div ng-controller="reviewImgCtrl">
                <div class="row">
                    {{$index}}
                    <div class="col-xs-12" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:1'>
                        <img ng-init="mainFotoFactory.main = clientURL + reviewImage.foto" src="{{mainFotoFactory.main}}" class="review-main-foto">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:4'>
                        <img ng-click="mainFotoFactory.main = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
                    </div>
                </div>
            </div>
        </div>
    </div>

А нужно, как мне кажется, что-то наподобие:

<div ng-controller="reviewCtrl">
        <div class="col-sm-6 col-xs-12" ng-repeat='review in reviews'>
            <div ng-controller="reviewImgCtrl">
                <div class="row">
                    {{$index}}
                    <div class="col-xs-12" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:1'>
                        <img ng-init="mainFotoFactory.main{{$index}} = clientURL + reviewImage.foto" src="{{mainFotoFactory.main{{$index}}}}" class="review-main-foto">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:4'>
                        <img ng-click="mainFotoFactory.main{{$index}} = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
                    </div>
                </div>
            </div>
        </div>
    </div>

Но тут помимо синтаксических проблем с src="{{mainFotoFactory.main{{$index}}}}"
$index во вложенном ng-repeat уже свой, а мне нужен внешний.

Спасибо

Answer 1

[Alex]

mainFotoFactory.main{{$index}} я так понял должно быть mainFotoFactory.main[{{$index}}]

А $index легко гуглиться, вот например jsfiddle.net/X5Tdh/2

Comments

[Дмитрий Соколов]

Большое спасибо, Alex! Сильно меня выручили;) $parent это класс!

[Alex]

Дмитрий Соколов: Я бы рекомендовал ng-init вариант (последний в примере)

Answer 2

[Дмитрий Соколов]

<div ng-controller="reviewCtrl">
        <div class="col-sm-6 col-xs-12" ng-repeat='review in reviews'>
            <div ng-controller="reviewImgCtrl">
                <div class="row">
                    <div class="col-xs-12" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:1'>
                        <img src="{{mainFotoFactory.main[$parent.$index]}}" class="review-main-foto">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-3" ng-repeat='reviewImage in reviewImages  | filter:{id_review:review.id} | limitTo:4'>
                        <img ng-init="mainFotoFactory.main[$parent.$parent.$index] = clientURL + reviewImage.foto" ng-click="mainFotoFactory.main[$parent.$index] = clientURL + reviewImage.foto" src="{{clientURL + reviewImage.foto}}" class="review-more-foto">
                    </div>
                </div>
            </div>
        </div>
    </div>