替換 <img> src與Angular.js

Question

我目前正在構建標題圖像的幻燈片，然后單擊選擇並設置該標題圖像以替換舊標題圖像。 到目前為止這是我的代碼：

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

我還設置了一個Plunker，以展示我的目標！

http://plnkr.co/edit/vRexvso9RvLwyKK1vcKZ

請有人幫我用其他'bannerImages'替換'currentBannerImage'嗎？

謝謝，

J.P

Answer 1

您可以使用AngularJS UI Bootstrap通過AngularJS實現輪播（如果您的興趣是嚴格的解決方案）。

編輯：

我不確定這是不是你想要的，但也許這會有所幫助： http ： //jsfiddle.net/FKUs3/

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

和

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

Answer 2

我想你可以簡單地在setHeader上更改currentbannerImage的值：

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