2016-09-06 9 views
0

私は自分のウェブサイトに左右のボタンでスライドショーを持っています。 ようこそ(http://i.prntscr.com/863ad10cfd4e4f1ea9b90721cc6582e8.png)。角度変数の値を別の変数に動的に設定する方法

私は角度を使って左右の画像を変更しています。あなたが関数内で見ることができるように

は、私は上記のボタンの右を押しために呼び出される関数である値

/*SlideShow Pictures*/ 
$scope.picture_1 = "./images/photos/watch.jpg"; 
$scope.picture_2 = "./images/photos/watch.jpg"; 
$scope.picture_3 = "./images/photos/watch.jpg"; 
$scope.picture_4 = "./images/photos/watch.jpg"; 
$scope.picture = $scope.picture_1; 
$scope.picture_value = 1; 

$scope.image_change_right = function() { 
    if ($scope.picture_value < 4) 
    { 
     $scope.picture_value = $scope.picture_value + 1; 
     $scope.picture = ('$scope.picture_' + $scope.picture_value); 
     console.log($scope.picture_value); 
    } 
    else{ 

     $scope.picture_value = 1; 
     $scope.picture = ('$scope.picture_' + $scope.picture_value); 
     console.log($scope.picture_value); 
    } 
} 

に増加します。

この関数は、変数を1増加させ、新しい変数を呼び出すために文字列に追加します。コンソールログには素晴らしいよ!しかし、私はそれが文字列としてのみ表示されていると思う---実際にはscope.pictureの値を変数に設定していません。

これを文字列ではなく有効な変数に設定するにはどうすればよいですか?

ありがとうございました!

+2

入れ値、$ scope.picture_2 、$ scope.picture_3、$ scope.picture_4を別の4つの値ではなく1つの配列に入れて、そのインデックスで再生する – Pranjal

答えて

5

より良い方法は、次のようになります:

コントローラー:

// The array of picture links. 
$scope.pictures = [ 
    "./images/photos/watch.jpg", 
    "./images/photos/watch.jpg", 
    "./images/photos/watch.jpg", 
    "./images/photos/watch.jpg" 
]; 

$scope.current = 0; // Initialize the current pictures place in the array. 
$scope.picture = $scope.pictures[$scope.current]; // Set the current picture. 

// The direction is either 1 or -1; 
$scope.changePicture = function (direction) { 
    $scope.current += direction; // add or remove one depending on direction. 
    $scope.current %= $scope.pictures.length; // Normalize the number based on the length of the pictures array. 
    console.log($scope.picture); 
} 

HTML:$ scope.picture_1の

<img src="{{picture}}"> 

<button ng-click="changePicture(1)">Next</button> 
<button ng-click="changePicture(-1)">Previous</button> 
+0

シンプルで美しい。それを愛する - ありがとう! –

+0

あなたの大歓迎です。 –

1

このような画像リンクを持つ配列を使用しないのはなぜですか?

/*SlideShow Pictures*/ 
$scope.pictures = ["./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg"]; 
$scope.picture = $scope.pictures[0]; 
$scope.picture_value = 0; 

$scope.image_change_right = function() { 
    if ($scope.picture_value < 4) 
    { 
     $scope.picture_value = $scope.picture_value + 1; 
     $scope.picture = $scope.pictures[$scope.picture_value]; 
     console.log($scope.picture_value); 
    } 
    else{ 

     $scope.picture_value = 0; 
     $scope.picture = $scope.pictures[$scope.picture_value]; 
     console.log($scope.picture_value); 
    } 
} 
+1

'$ scope.picture_value ++' $ scope.pictures.length'のように '$ scope.picture_value'を連続的にリセットするのではなく、 – be4code

+1

'if($ scope.picture_value <$ scope.pictures.length)'に 'if($ scope.picture_value <4)'を入れて、スクリプトが正しく動作することを確認してください。追加されたり削除されることがあります。 – RicoBrassers

関連する問題