javascript - Replacing the <img> src with Angular.js -


i building slideshow of header images, on click select , set header image replace old one. code 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 set plunker, demonstrate on about!

http://plnkr.co/edit/vrexvso9rvlwykk1vckz

please can me replace 'currentbannerimage' 1 of other 'bannerimages'?

thanks,

jp

you can use angularjs ui bootstrap implementing carousel angularjs (if interest strictly in solution).

edit:

i'm not sure if that's wanted, maybe 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);   } }  

Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -