CODEWITHSUNDEEP
javascriptangularjs
Ben L
Ben L

Reputation: 127

How to Set the value of an angular variable to another variable dynamically

I have a slideshow on my website with left and right buttons. Like this (http://i.prntscr.com/863ad10cfd4e4f1ea9b90721cc6582e8.png).

I am using angular to change the image on left and right.

As you can see in the function I increase the value 

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

Above is the function called for button right press.

The function increases the variable by 1 and adds it to the string to call the new variable. In the console log it looks great! However I think it is only showing as a string --- it is not actually setting the value of scope.picture to the variable.

How can I set this to not be a string but as a valid variable?

Thanks everyone!

Upvotes: 0

Views: 1048

Answers (2)

Rabbi Shuki Gur
Rabbi Shuki Gur

Reputation: 1716

A better way would be like this:

The Controller:

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

The Html:

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

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

Upvotes: 7

Robert Sandu
Robert Sandu

Reputation: 673

Why don't you use an array with image links like this?

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

Upvotes: 1

Related Questions