Guide on dynamically assigning the value of an Angular variable to another variable

Question

Guide on dynamically assigning the value of an Angular variable to another variable

My website has a slideshow feature with left and right buttons, similar to this example: .

I am using Angular to change the image when the left or right button is clicked.

In the function, I am incrementing a 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);
    }
}

This function is triggered when the right button is pressed.

The issue is that even though the value is correctly shown in the console log, it seems like it is being treated as a string rather than a variable. How can I ensure that the value is assigned to the scope.picture variable correctly?

Any help or advice would be greatly appreciated. Thank you!

javascript angularjs

Answer 1

Answer №1

Here is an improved method:

The Controller:

// Array containing links to pictures.
$scope.pictures = [
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg"
];

$scope.current = 0; // Initialize the current picture index.
$scope.picture = $scope.pictures[$scope.current]; // Set the current picture.

// The direction is either 1 or -1;
$scope.changePicture = function (direction) {
  $scope.current += direction; // Increment or decrement based on direction.
  $scope.current %= $scope.pictures.length; // Ensure index stays within bounds.
  console.log($scope.picture);
}

The Html:

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

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

Answer 2

Here is an improved method:

The Controller:

// Array containing links to pictures.
$scope.pictures = [
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg",
  "./images/photos/watch.jpg"
];

$scope.current = 0; // Initialize the current picture index.
$scope.picture = $scope.pictures[$scope.current]; // Set the current picture.

// The direction is either 1 or -1;
$scope.changePicture = function (direction) {
  $scope.current += direction; // Increment or decrement based on direction.
  $scope.current %= $scope.pictures.length; // Ensure index stays within bounds.
  console.log($scope.picture);
}

The Html:

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

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

Answer 3

Answer №2

Have you considered using an array to store image links for your slideshow?

   /*Image Slideshow Setup*/
$scope.images = ["./images/slideshow/image1.jpg", "./images/slideshow/image2.jpg", "./images/slideshow/image3.jpg", "./images/slideshow/image4.jpg"];
$scope.currentImage = $scope.images[0];
$scope.imageIndex = 0;

$scope.changeImage = function () {
    if ($scope.imageIndex < 4)
    {
       $scope.imageIndex = $scope.imageIndex + 1;
       $scope.currentImage = $scope.images[$scope.imageIndex];
       console.log($scope.imageIndex);
    }
    else{

        $scope.imageIndex = 0;
        $scope.currentImage = $scope.images[$scope.imageIndex];
        console.log($scope.imageIndex);
    }
}

Answer 4

Have you considered using an array to store image links for your slideshow?

   /*Image Slideshow Setup*/
$scope.images = ["./images/slideshow/image1.jpg", "./images/slideshow/image2.jpg", "./images/slideshow/image3.jpg", "./images/slideshow/image4.jpg"];
$scope.currentImage = $scope.images[0];
$scope.imageIndex = 0;

$scope.changeImage = function () {
    if ($scope.imageIndex < 4)
    {
       $scope.imageIndex = $scope.imageIndex + 1;
       $scope.currentImage = $scope.images[$scope.imageIndex];
       console.log($scope.imageIndex);
    }
    else{

        $scope.imageIndex = 0;
        $scope.currentImage = $scope.images[$scope.imageIndex];
        console.log($scope.imageIndex);
    }
}

Guide on dynamically assigning the value of an Angular variable to another variable

Answer №1

Answer №2

Similar questions

The caret operator in NPM does not automatically install the latest minor version of a package

exchange information among distinct domains

Ways to invoke a function from a service in AngularJS?

Discovering user activity through rooms within SocketIO

navigating between html pages using sliding next and previous buttons

Which regular expression should be used to validate names with international characters?

What steps can be taken to revert this Node.js module to a particular version and ensure it does not automatically update in

Exploring solutions for handling asynchronous issues with vue3-google-map

Tips on integrating a series of typical utility directives into an Angular module

Is sendFile causing an error due to an invalid JSON format?

When an unrelated value is changed, the Vue 2 dynamic component experiences a loss of its values during the refresh

Having trouble with Angular JS functionality

Ways to display and conceal a div when hovering over another div

What are the steps to build a dynamic webpage in a Django project?

Exploring advanced routing concepts in Angular 2

What is the method utilized by Redux to store data?

The counterpart to Ruby's `.select{ |x| condition }` in Javascript/ React.js would be to

Tips for managing the 'completed' button in an Android keyboard application using AngularJS/Ionic

Simulating NextJS router triggers using Jest

The issue arises when attempting to update the input of a child component within a reactive form during the OnInit lifecycle