2017-08-15 1 views
0

I found this tutorial AngularJSで基本的な画像スライダーを作成する方法について。私は自分自身の解決策で素晴らしい仕事をしているが、私は解決する方法がわからない1つの問題に遭遇した。AngularJSでスライダー内の画像の数を取得し、次/前の関数に渡す方法は?

$scopeに画像ソースが$scope.slides(で定義されています)を使用してハードコードされています。残念ながら、JSONデータに基づいて動的に設定された複数のスライダがあるため、このアプローチは私にとってはうまくいかないでしょう。

私が取り組んでいる問題は、スライダの次の/以前の機能がスライダ内のイメージの総数を得ることに依存していることです。この例では、これを達成するために$scope.slides.lengthを使用しています。私が作成したスライダーの画像の数をハードコードすると、それは完全に機能しますが、入力されるスライドに応じてこの数値を動的に生成する方法を知りたいと思います。ここで

<div class="slider"> 
    <img ng-repeat="slide in vm.selectedProduct.images" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.source}}"> 
    <a class="arrow prev" href="#" ng-click="nextSlide()"></a> 
    <a class="arrow next" href="#" ng-click="prevSlide()"></a> 
    <nav class="nav"> 
     <div class="wrapper"> 
      <ul class="dots"> 
       <li class="dot" ng-repeat="slide in slides"> 
        <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);"></a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</div> 

ボタンをクリックし、[OK]をクリックします($scope.slides.lengthためにハードコードされた値を使用して、スライダの作業例です:

$scope.direction = 'left'; 
$scope.currentIndex = 0; 

$scope.setCurrentSlideIndex = function (index) { 
    $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right'; 
    $scope.currentIndex = index; 
}; 

$scope.isCurrentSlideIndex = function (index) { 
    return $scope.currentIndex === index; 
}; 

$scope.prevSlide = function() { 
    $scope.direction = 'left'; 
    $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0; 
    //$scope.slides.length should be dynamic 
}; 

$scope.nextSlide = function() { 
    $scope.direction = 'right'; 
    $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1; 
    //$scope.slides.length should be dynamic 
}; 

はここに私のスライダーテンプレートです:ここで

は私の app.jsからいくつかのコードですそれを見るためのリンク)

Plunker

答えて

0

気にしないで、解決策はとても簡単で、私には起こりませんでした。 vm.selectedProduct.images.lengthは私が必要としていたものでした。スコープのためにapp.js内で動作するとは思わなかったが、完璧に機能した!

関連する問題