AngularJS Dynamic Image Load Multiple Folders

Question

I'm trying to dynamically load images to a slider based on which folder is selected in the navbar. The subfolders are located in the images folder called cats,dogs etc, which are selectable in the navbar. I assumed I needed to name the images the same in each folder, which I've done as (1.JPG,2.JPG etc.), so they can dynamically load. I've yet to get the images to load into the image slider. Please see what i've missed in the controller or the path in the html. Thank you.

I've found the problem. It's not reading {{uri}}/{{currentFolder}}/{{image}}". The Console elements show an empty tag. So all that shows up on screen is the alt text. It also reads everything in Carousel indicators. Can't find why it's not reading this path. Any help would be awesome. Thx.

templateurl.html

<div class="slider">
      <div id ="myCarousel"class="carousel-slide" data-ride="carousel">
        <ol class ="carousel-indicators">
         <li data-target = "#myCarousel" ng-repeat="image in images" 
     ng-class="{active:isCurrentSlideIndex($index)}"
     data-slide-to="   {{image}}">     </li>
          </ol>
          <div class="carousel-inner">
            <div ng-class="{item: true, active: isCurrentSlideIndex($index)}"ng-repeat="image in images">
              <img class ="img" ng-src="{{uri}}/{{currentFolder}}/{{image}}"alt="Slide number {{image}}">>
      </div>

Index.html

<slider images="images"/>
    </div>
    </div>
      <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-botom" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-repeat="folder in folders" ng-class="{active:activeFolder(folder)}" ng-click="selectFolder(folder)">
             <a ng-href="#{{folder}}">{{folder}}</a>
            </li>
          </ul>
        </div><!--/.nav-collapse -->

app.js

var sliderApp=angular.module('sliderApp',['ngAnimate']);

    sliderApp.controller('SliderController', function($scope) {
      $scope.w=window.innerWidth;
      $scope.h = window.innerHeight;
      $scope.uri="images";
      $scope.folders =['cats','dogs'];
      $scope.images =["1.JPG","2.JPG","3.JPG"];
      $scope.currentFolder = $scope.folders[0];
      $scope.selectFolder = function(folder) {
        $scope.currentFolder=folder;
      };
      $scope.activeFolder = function(folder) {
        return (folder ===$scope.currentFolder);
      }
    });


    sliderApp.directive('slider', function ($timeout) {
      return {
        restrict: 'AE',
      replace: true,
      scope:{
        images: '='
      },
        link: function (scope, elem, attrs) {

        scope.currentIndex=0;

        scope.next=function(){
          scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
        };

        scope.prev=function(){
          scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
        };

        scope.isCurrentSlideIndex = function (index) {
                return scope.currentIndex === index;
            };


        scope.$watch('currentIndex',function(){
          scope.images.forEach(function(image){
            image.visible=false;
          });
          scope.images[scope.currentIndex].visible=true;
        });

        /* Start: For Automatic slideshow*/

        var timer;

        var sliderFunc=function(){
          timer=$timeout(function(){
            scope.next();
            timer=$timeout(sliderFunc,4000);
          },4000);
        };

        sliderFunc();

        scope.$on('$destroy',function(){
          $timeout.cancel(timer);
        });

        /* End : For Automatic slideshow*/

        },
      templateUrl:'templates/templateurl.html'
      }
    });

Answer 1

What I see, you are not loading images. Inside selectFolder() method you should do $http.get() to get list of images, create url for each image and pass it to Look at that Load directory of images in AngularJS Or google for more 'angular loading list of images from server' results