Question

94

Replacing the < img> src with Angular.js

rated 0 times [ 99] [ 5] / answers: 1 / hits: 32404 / 11 Years ago, thu, april 25, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shaynelandenb

Add To Favorites

Follow

Total Points: 293

Total Questions: 97

Total Answers: 94

Location: Monaco

Member since Fri, Sep 24, 2021

3 Years ago

shaynelandenb questions

1 Vanilla JavaScript AJAX form submit

Tue, Jan 25, 22, 00:00, 2 Years ago

1 Refresh data without reloading the page

Wed, Nov 10, 21, 00:00, 3 Years ago

1 How to determine browser platform without navigator.platform

Mon, Sep 6, 21, 00:00, 3 Years ago

1 NextJs - Where can we add a < script> code?

Wed, Apr 21, 21, 00:00, 3 Years ago

1 How to import a module that is in a different folder in Node.js?

Thu, Feb 18, 21, 00:00, 3 Years ago

View All

answered 11 Years ago mckinleyk · Accepted Answer

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);

  }

}