Replacing the <img> src with Angular.js

Question

I am currently building a slideshow of header images, then on click select and set that header image to replace the old one. This is my code so far:

var app = angular.module('plunker', []);

app.controller('BannerCtrl', function($scope) {  

  var imageCounter = 0;

  $scope.nextButton = function () {
    imageCounter = imageCounter + 1;
    if (imageCounter === 1) {
      $scope.carouselState = 'second-slide';
    }
    if (imageCounter === 2) {
      $scope.carouselState = 'third-slide';
    }
    if (imageCounter > 2) {
      imageCounter = 0;
      $scope.carouselState = 'reset-slide';
    }
  };

  $scope.previousButton = function () {
    imageCounter = imageCounter - 1;
    if (imageCounter < 0) {
      imageCounter = 2;
      $scope.carouselState = 'third-slide';
    }
    if (imageCounter === 1) {
      $scope.carouselState = 'second-slide';
    }
    if (imageCounter === 0) {
      $scope.carouselState = 'reset-slide';
    }
  };

  $scope.setHeader = function () {
    if (imageCounter === 0) {
      $scope.currentbannerImage = '/styles/img/banner-default1.jpg';
      $scope.bannerState = '';
    }
  };

  $scope.currentbannerImage = [
    {
      src: "1.jpg"
    }
  ];

  $scope.bannerImages = [
    {
      src: "2.jpg"
    },
    {
      src: "3.jpg"
    },
    {
      src: "4.jpg"
    }
  ];
});

I have also set up a Plunker, to demonstrate what I am on about!

http://plnkr.co/edit/vRexvso9RvLwyKK1vcKZ

Please can someone help me to replace the 'currentBannerImage' with one of the other 'bannerImages'?

Thanks,

JP

the-lay · Accepted Answer · 2013-04-25 12:43:36Z

11

You can use AngularJS UI Bootstrap for implementing carousel with AngularJS (if your interest is strictly in solution).

Edit:

I'm not sure if that's what you wanted, but maybe this will be helpful: http://jsfiddle.net/FKUs3/

<img ng-src="{{availableImages[currentImage].src}}"/>

and

$scope.currentImage = 0;
$scope.availableImages = [
{
  src: "http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/US_1.svg/50px-US_1.svg.png"
},
{
  src: "http://0.tqn.com/d/painting/1/0/V/_/1/Stencil-Number2a.jpg"
},
{
  src: "http://eminiunderground.com/wp-content/uploads/2012/02/Stencil-Number3a.jpg"
}
];

$scope.nextButton = function() {
  $scope.currentImage++;
  if ($scope.currentImage > ($scope.availableImages.length - 1)) {
    $scope.currentImage = 0;
  }
}
$scope.prevButton = function() {
  $scope.currentImage--;
  if ($scope.currentImage < 0) {
    $scope.currentImage = ($scope.availableImages.length - 1);
  }
}

edited Apr 25, 2013 at 12:43

answered Apr 25, 2013 at 12:04

the-lay

1,48112 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JohnRobertPett Over a year ago

Thanks for replying, though I have made a carousel, it is just the image 'src' setting I can't seem to get working.

the-lay Over a year ago

I'm not sure that's what you wanted, but here it is, in edit of this post :) Hope it will be helpful.

JohnRobertPett Over a year ago

That is a good answer, I will definitely use parts of this, but the main thing is that I need to update the image src. Thanks for your reply.

JohnRobertPett Over a year ago

Actually, the basis of that, with a little gentle nudging, is exactly what I want! Thank you!

Wagner Francisco · Accepted Answer · 2013-04-25 11:52:58Z

0

I think you can simply change the value of the currentbannerImage on setHeader:

$scope.setHeader = function () {
    $scope.currentbannerImage = $scope.bannerImages[imageCounter];
};

answered Apr 25, 2013 at 11:52

Wagner Francisco

2,2001 gold badge16 silver badges15 bronze badges

1 Comment

JohnRobertPett Over a year ago

Given that a go, but it doesn't work for me. Tried setting the index of the current image also, but that didn't work! $scope.currentbannerImage[0] = $scope.bannerImages[imageCounter];

Collectives™ on Stack Overflow

Replacing the <img> src with Angular.js

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related