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