0

更新：我更改了我的代码（基于此示例... http://www.script-tutorials.com/photo-gallery-with-angularjs-and-css3/）现在向右滑动有效，但向左滑动没有吨

我为图库创建了一个控制器，并设法在单击缩略图时更改主图像。但是，当使用 ng-swipe-left 滑动时，我希望主图像也更改为下一个缩略图图像。主图像将滑出视图，但新图像不显示。这是我的控制器...

controller('blogpageCtrl', ['$scope','$routeParams','$http',
function($scope, $routeParams, $http){
  $http.get('views/pages/' + $routeParams.articleId + '.json').success(function(data){
    $scope.article = data;

  //$scope.setImage = function(imageUrl){
  //$scope.mainImageUrl = imageUrl;
  //};
  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.data.images.length - 1;
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.data.images.length - 1) ? ++$scope._Index : 0;
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };

  });
}]);

这是我的html...

 <img ng-repeat="img in article.images" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{img}}" class="photobg">
<ul class="article-thumbs">
  <li ng-repeat="img in article.images" ng-class="{'active':isActive($index)}">
    <img ng-src="{{img}}" ng-click="showPhoto($index);">
  </li>
</ul>

更新：感谢 user814628 为我指明了正确的方向。我通过用简化的代码修改我的控制器来让它工作......

  $scope._Index = 0;

  // if a current image is the same as requested image
  $scope.isActive = function (index) {
    return $scope._Index === index;
  };

  // show prev image
  $scope.showPrev = function () {
    $scope._Index = Math.max(0, $scope._Index - 1);
  };

  // show next image
  $scope.showNext = function () {
    $scope._Index = Math.min(3, $scope._Index + 1);
  };

  // show a certain image
  $scope.showPhoto = function (index) {
    $scope._Index = index;
  };
4

0 回答 0