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

Question

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!

Put value of $scope.picture_1, $scope.picture_2 , $scope.picture_3, $scope.picture_4 in a single array instead of 4 diferent value then play with its index — Pranjal
– Pranjal, Commented Sep 6, 2016 at 8:14

Rabbi Shuki Gur · Accepted Answer · 2016-09-06 08:29:29Z

7

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>

answered Sep 6, 2016 at 8:29

Rabbi Shuki Gur

1,72620 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben L Over a year ago

Simple and Beautiful. Love it -- Thanks!

Robert Sandu · Accepted Answer · 2016-09-06 08:15:58Z

1

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

answered Sep 6, 2016 at 8:15

Robert Sandu

6731 gold badge6 silver badges15 bronze badges

2 Comments

be4code Over a year ago

Much more clearer will be if you use something like $scope.picture_value++ % $scope.pictures.length instead of continuous resetting $scope.picture_value.

RicoBrassers Over a year ago

Please note, you may want to exchange if ($scope.picture_value < 4) for if ($scope.picture_value < $scope.pictures.length) to make sure the script still works correctly, if additional pictures are added or some get removed.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related