current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I'm setting up a gallery view for a local house builder using bootstrap and Angularjs 1.5X. For the gallery view I want to show a list of thumbnail images down one side, and then the full image on the other. My problem is that I am trying to call the images in an array, that are also inside of another array within that first array, like so.

app.controller('ImageController', function () {
        this.images = gallerys;
    });

    app.controller('GalleryController', function () {
            this.current = 0;
            this.setCurrent = function (newGallery) {
            this.current = newGallery || 0;
        };
    });     
var gallerys = [{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

I want to just repeat through all the thumb images in the first images array.I want to use each images array on a different page.This is what my code looks like in the HTML view.

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in image.images">
        <img class="img-full || img-responsive" ng-src="{{image.images[gallery.current].full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in image.images">
        <img ng-src="{{image.images[0].thumb}}">
      </li>
    </ul>
  </div>
</div>

I have a demo of this site up if that helps anyone. http://demo.ranlife.com/beaconhomes2/monson.php

share|improve this question
    
It's a poor choice to call so much things image and images. I suggest you not to rename ImageController to image but scope or something. Also do not rename gallerys to images, that creates confusion – Tamas Hegedus 19 hours ago
up vote 0 down vote accepted

This would work with your current controller:

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div>
      <div ng-repeat="image in image.images">
        <div ng-repeat="image in images.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="image in image.images">
         <div ng-repeat="thumbnail in image.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

It is super confusing that you are referring to your gallery in your controller as image and then naming your variable in ng-repeat as image. Try this for clarity:

Change your controller to: 

app.controller('ImageController', function () {
        this.gallery= gallerys;
 });

And your markup to:

<div class="content" ng-controller="ImageController as imageCtrl">
  <div class="col-md-8">
    <div>
      <div ng-repeat="gallery in imageCtrl.gallery">
        <div ng-repeat="image in gallery.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="gallery in imageCtrl.gallery">
         <div ng-repeat="image in gallery.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

Furthermore, change your gallery object to:

var gallerys = [{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

Edited

To display only one full image at a time on ng-click of the thumbnails change your controller to:

app.controller('ImageController', function () {
        this.gallery= gallerys;
        this.activeImage = null;
 });

Set the active image on your markup by calling ng-click within ng-repeat like so:

<li ng-repeat="gallery in imageCtrl.gallery">
    <div ng-repeat="image in gallery.images">
        <img ng-src="{{image.thumb}}" ng-click="imageCtrl.activeImage = image.full">
    </div>
</li>

Somewhere else just display the activeImage in the controller like so:

 <img ng-src="{{imageCtrl.activeImage}}">
share|improve this answer
    
For the full version of the image, how would I show only one of them? I intend to do an ng-click on the thumbnails so that when they are clicked, it shows the full image next to it. – GraphicShark 19 hours ago
    
I've added the answer to your question to the last part of the answer. Hope that helps. Don't forget to up-vote the correct answer. – Wilmer S 3 hours ago
up vote 0 down vote

You have several name collisions like image and images, which does not cause a problem itself but makes it hard to understand what references what. Try something like this:

app.controller('ImageController', function () {
    this.gallerys = gallerys; // Renamed images to gallerys inside ImageController
});

...

<div class="content" ng-controller="ImageController as imageScope">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in imageScope.gallerys[gallery.current].images">
        <img class="img-full || img-responsive" ng-src="{{image.full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in imageScope.gallerys[0].images">
        <img ng-src="{{image.thumb}}">
      </li>
    </ul>
  </div>
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.