Array within Array gallery in Angularjs

Question

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

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, Feb 10 '16 at 21:27

score 0 · Answer 1 · answered Feb 10 '16 at 21:30

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>

Wilmer SH · Accepted Answer · 2016-02-11T13:36:24.730

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}}">

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, Feb 10 '16 at 21:56
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 SH, Feb 11 '16 at 13:31
I'd love to up-vote this, but I don't have enough rep-points yet. I do have a couple more questions if that's alright? First off, this shows all the image arrays, how do I just show the first array, second array, ect. I though I could do
but that doesn't work. The second question is how to show a default image before I select the active one. I really appreciate the help. — GraphicShark, Feb 11 '16 at 17:51
Your first question is answered [here](http://stackoverflow.com/a/16824944/4775223). Second question: set the 'activeImage' to your default image upon loading your controller with [ng-init](https://docs.angularjs.org/api/ng/directive/ngInit) and set it again to the corresponding image once they have loaded. You are going to have to use promises which is a whole topic on its own. — Wilmer SH, Feb 11 '16 at 19:13

Array within Array gallery in Angularjs

2 Answers2