javascript - 用 Angular.js 替换 src

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”吗？

谢谢，

日本

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