Как установить значение угловой переменной в другую переменную динамически

Question

У меня есть слайд-шоу на моем сайте с левой и правой кнопками. Нравится (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 для переменной.

Как я могу установить это как строку, но как допустимую переменную?

Спасибо всем!

Answer 1

Лучше всего было бы так:

Контроллер:

// 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:

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

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

Answer 2

Почему бы вам не использовать массив с такими ссылками изображения?

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