использование ng-repeat в html для отображения нескольких изображений в контроллере

0

У меня есть этот код HTML:

                   <li data-thumb="images/ss.jpg">
                       <img src="images/ss.jpg"/>
                   </li>
                    <li data-thumb="images/ss1.jpg">
                        <img src="images/ss1.jpg"/>
                    </li>
                    <li data-thumb="images/ss2.jpg">
                        <img src="images/ss2.jpg"/>
                    </li>
                    <li data-thumb="images/ss3.jpg">
                        <img src="images/ss3.jpg"/>
                    </li>

И я хочу использовать свой контроллер angularJS для создания чего-то подобного в моем HTML вместо этого:

                    <li data-thumb="{{image[i].src[i]}}" ng-repeat="image in images">
                        <img ng-src="{{image[i].src]i]}}"/>
                    </li>

(Я знаю, что приведенный выше код не работает, вот почему я спрашиваю...)

Таким образом, по существу, у меня будет тот же результат, что и раньше (4 разных изображения). До сих пор мой контроллер "ListingCtrl":

$scope.images = [{
        src1: 'images/ss.jpg',
        src2: 'images/ss1.jpg',
        src3: 'images/ss2.jpg',
        src4: 'images/ss3.jpg',
    }];

Буду признателен за любую помощь в том, чтобы заставить меня выполнить это! В будущем я хочу проанализировать JSON файл и получить из него изображения... Но я думаю, это должно быть началом.

Теги:
controller

3 ответа

2
Лучший ответ

Из того, что я вижу, у вас есть массив объектов. Поэтому, чтобы распечатать список изображений, выполните следующие действия:

<li data-thumb="{{ images[$index][key] }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ images[$index][key] }}"/>
</li>

или более простая версия

<li data-thumb="{{ image }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ image }}"/>
</li>

Если вам нужно получить индекс изображения внутри массива, просто распечатайте его или используйте переменную $ index так:

{{ $index }}
Поделиться
  • 1
    Спасибо, это работает! :))
2

использовать это::

<li data-thumb="{{ images[$index][key] }}" ng-repeat="(key, image) in images track by $index">
    <img ng-src="{{ images[$index][key] }}"/>
</li>
Поделиться
  • 0
    К сожалению, это не работает :( изображения "отображаются", но они пусты (на самом деле я их не вижу)
  • 0
    тогда на этом URL не должно быть изображений.
Показать ещё 1 комментарий
1

В вашем массиве изображений содержится только один объект. Если это структура данных, то итерация по первому элементу вашего массива осуществляется с помощью ключевого значения:

<div ng-repeat="(k, v) in images>"
    <img ng-src="{{v}}"/>
</div>

В идеале ваша переменная изображений должна быть либо массивом, либо объектом. Нынешняя структура данных не имеет смысла.

Поделиться
  • 1
    Вы правы, я имел в виду, что это массив из 4 изображений (4 записи), а не массив из 4 объектов изображения. Я изменил код контроллера на: $ scope.images = {src1: 'images / ss.jpg', src2: 'images / ss1.jpg', src3: 'images / ss2.jpg', src4: 'images / ss3. jpg ',}; Есть ли смысл сейчас?
  • 0
    Да, теперь просто замените 'images [0]' на 'images' в моем ответе.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню