"Although there are no errors, the ng-switch directive within the ng-repeat is not functioning as

I'm working on setting up a simple image gallery where I can dynamically change the displayed image by setting a specific number for currentImage.

Check out my HTML code:

<div class="main_image" ng-switch on="current_image">
    <img ng-repeat="image in sorted_images" ng-src="{{ image.large }}" class="image {{ $index }}" ng-switch-when="{{ $index }}">
    <img ng-src="{{ sorted_images[0].medium }}" class="image 0" ng-switch-default >
</div>

Snippet from the controller (written in CoffeeScript):

main_image = el.find('.main_image');
main_image.on('click', ->
    scope.current_image = 1

It seems like even though my controller is updating the current_image variable, the switch doesn't happen. Could it be because of $index? I'm not sure. Can ng-switch be used within ng-repeat as shown in my example above?

Appreciate any help!

Answer №1

In case you have assigned a value to current_image through the controller and wish to display the corresponding image, you can simply utilize the following code snippet:

<img src="{{ sorted_images[current_image].large }}" class="image {{ current_iamge }}" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop or terminate all ongoing requests in AngularJS

When switching routes, I want to prevent any pending requests from the previous route in order to avoid issues where responses from the previous route interfere with data on the current route. This sometimes happens when responses from the previous route t ...

Unable to properly structure data in JSON request

Trying to fill JSON request with data from phpsearch.php file (displayed below) <?php include "base.php"; $name = $_GET["name"]; $query = "SELECT lat, lng FROM markers WHERE name = '".$name."'"; $result = mysql_query($query); $json = array(); ...

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

An error occurred while running the ng serve command: C:\Mysystem\Programs\myfwms>ng serve The serve command needs to be executed within an Angular project, but a project definition could not be found. I encounter this error when ...

Could someone share an instance of an AngularJS configuration that continuously checks for new data and automatically refreshes the user interface once the data is obtained?

Struggling to find a suitable example for this scenario. I am looking to create a chart directive that will be updated every minute by fetching data from a web service. Currently, I have a service that acts as a wrapper for the web service. My controller ...

Execute HTML code within a text field

Is it possible to run html code with javascript inside a text box, similar to w3schools.com? I am working solely with html and javascript. Thank you. For example, I have two text areas - one for inserting html, clicking a button to run the code, and displ ...

An SQL query that functions flawlessly in STUDIO 3T, yet fails to execute in Express.js

I encountered a puzzling situation where a query that functions perfectly in STUDIO 3t fails to retrieve any data in express js. Below is the code comparison: STUDIO 3t Query: db.getCollection("tickets").find({ $and: [ {"TCKT_CRTE_DTTM" : { ...

Creating multiple countdowns in AngularJS using ng-repeat is a handy feature to have

Currently, I have a small AngularJS application that is designed to search for users and display their upcoming meetings. The data is retrieved from the server in JSON format, with time displayed in UTC for easier calculation to local times. While I have s ...

Calculate the difference between the current value and the previous value

As I work on developing an app using vue.js, I am currently facing a minor issue. async fetchCovidDataByDay(){ const res = await fetch(`https://api.covid19api.com/live/country/${this.name}/status/confirmed`); const data = await res.json(); this ...

Angular's sanitization script incorrectly modifies the URL value provided in the script src attribute

How can I safely sanitize an external URL to dynamically load a script and remove scripts for a specific component only? Here is the approach I have used: private sanitizeUrl(): SafeResourceUrl { // Value declared in the environment file return ...

Is there a way to efficiently use AJAX and PHP to iterate through JSON data and save it to a new JSON file

I have created a simple movie editor with a sidebar where users can drag and drop elements. On the right side, users can edit these elements as they wish and save the data to a JSON file. When the user clicks save, I want it to create a new file and save t ...

The AJAX POST request encountered an error

I apologize for the lackluster title. Basically, when the script is executed, it triggers an 'error' alert as shown in the jQuery code below. I suspect that the issue lies in the structure of my JSON data, but I'm uncertain about the necess ...

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

Having difficulty retrieving the value from an input field, despite trying both text() and val() methods

I'm struggling to retrieve the value of an input field that a user enters and then use it in my code. I have attempted using both text() and val() to get the value from the input fields, but neither method seems to be working for me. If you have any ...

My Node/Express application is failing to recognize updates made to my Pug view files

I have a Node/Express app that utilizes the Pug/jade template engine, and I am able to render everything successfully. However, I am facing an issue where modifications made to my index.pug file do not reflect on the homepage, even after restarting the ser ...

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

Can a single button click be shared across multiple forms?

The main concept involves a grid where when a user double-clicks on a row, a modal window (Bootstrap panel) opens with a panel-body section for editing the data and a panel-footer containing a btn-group for actions like "Save", "Cancel", or "Close". This s ...

Web Security Vulnerability: Cross Site Scripting Detected

In our code, we are aiming to prevent XSS (Cross Site Scripting) attacks. However, the solution may involve a combination of JS (JavaScript) and HTML escaping, which could prove to be quite challenging. Below is a snippet that closely resembles our code: ...

Incorporating PHP arrays into JavaScript code within a PDO environment

I'm facing an issue trying to incorporate a PHP array into my JS code and I'm not sure how to resolve it. I found this example (I'm using PDO, not mysqli): Inserting MYSQL results from PHP into Javascript Array $pdo = new PDO('mysql:h ...

Creating seamless transitions between pages using hyperlinks

On the homepage, there are cards that list various policies with a "details" button above them. Clicking on this button should take me to the specific details page for that policy. However, each product can only have one type assigned to it. For instance: ...

Executing the callback function passed as a prop

I'm a bit confused about how to call a callback function in an element's prop. Let's say I have a button here: <Button onPress={() => { loadMore()}} title="Load More" backgroundColor='#0A55C4' /> I am wondering wh ...