Angular, как изначально показать первый набор данных в массиве и позволить клик даже для изменения индекса массива

Question

Angular, как изначально показать первый набор данных в массиве и позволить клик даже для изменения индекса массива

0

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

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

Создайте структуру данных следующим образом:

this.imgList = [
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
    {imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

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

Подумал бы, что я мог бы сделать что-то вроде {{x.imgList [0].imgTitle}}, но не уверен, как изменить его после того, как кто-то щелкнет эскиз.

Есть ли простой способ сделать что-то подобное без предварительной загрузки всех изображений?

VirtualLife 25 март 2016, в 02:10

Источник

Теги:

angularjs

arrays

1 ответ

Ещё вопросы

Kyle · Accepted Answer · 2016-03-24T21-58-00.000Z

В угловом режиме вы можете создать контроллер, который имеет введенную область $ scope.

$scope.imgList = [
{imgTitle: 'title', imgDescription: 'description', imgUrl: '1.jpg', imgTnUrl: '1tn.jpg'},
{imgTitle: 'title', imgDescription: 'description', imgUrl: '2.jpg', imgTnUrl: '2tn.jpg'}

$scope.showFullSize = false;

Затем в шаблоне вы можете использовать переменную области видимости, аналогичную описанной выше, кроме как с помощью директивы ng-src и ng - для рендеринга или рендеринга изображения.

<img ng-if="showFullSize" ng-src="{{imgList[iterator].imgUrl}}"/>
<img ng-if="!showFullSize" ng-src="{{imgList[iterator].imgTnUrl}}"/>

Кроме того, вы можете определить свою логику, чтобы установить свойство showFullSize, которое покажет/не отобразит изображение полного размера. Если вы хотите, чтобы запрос был сделан, чтобы вытащить изображение, вы можете использовать угловые директивы show/hide вместо if.

Это в основном имеет смысл. Как бы я сменил итератор? Будет ли это просто еще одна переменная области видимости, которую я меняю при нажатии?
Точно, вы можете просто нажать ng-click на миниатюру изображения, которая использует другую функцию в области видимости, чтобы изменить размер showFull. $ scope.showBigImage = function () {$ scope.showFullSize = true;}