Using the ng-src and ng-repeat directives in combination within an if/else statement

Seeking assistance with implementing an if/else statement to display different pictures based on a condition in AngularJS.

Here is an example of the controller code:

$scope.getFeatureNo = function (thisCase) {
        if (thisCase.featureno == 1) {
            return red_light;
        }
        else {
            return amber_light;
        }

When the condition is met (featureno equal to 1), a red light image from the same folder as the index.html file should be displayed.

Using ng-repeat in HTML to generate a table:

  <md-grid-tile ng-repeat-start="thisCase in caselist">
        {{getFeatureNo(thisCase)}}
  </md-grid-tile>

Looking for guidance on how to use ng-src in this scenario and also providing details about the data structure:

    {
    "SchemeCaseID": "122^239",
    "featureno": "1",
    "slide": "LC",
    ... // Data continues
    

Appreciate any help provided and apologies for any language barriers.

Answer №1

In case yellow_light and stop_light represent the URLs for images, you can easily implement ng-src by including an img tag:

<img ng-src="{{ loadImages(thisScenario) }}" />

Answer №2

Revamp your webpage with the following adjustments:

</md-grid-tile>

The function getFeatureNo(thisCase) is responsible for retrieving the image's file path.

Answer №3

When you need to show a specific image depending on a certain condition, you can make use of ng-src along with a conditional operator.

Here is an example:

<img ng-src="{{currentCondition === 'rainy' ? 'rainy day image url' : 'sunny day image url'}}">

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

Dynamically size and position elements to fit perfectly within the container

I am currently facing a challenge with my absolutely positioned elements that have different position.top and height values generated from the database. The main goal is to resolve collisions between these elements by shifting them to the right while adju ...

JavaScript object conversion to Java Model is proving to be a challenge

When looking at my Spring controller and client-side Javascript code, I noticed that the Javascript object is having trouble reaching the Spring controller in Object form. Here is a snippet of my Controller code: @RequestMapping(value = "/addRating", meth ...

AngularJS - linking a function to an isolated scope using '&', but failing to trigger on ng-click event

I have a parent directive that includes a controller setting a method on $scope. In the child directive, I attempt to access this scope method using &. However, when trying to use the ng-click inside the child directive, it does not activate the pare ...

Identifying Flash content in a unique way

In my dynamic page (let's call it myFlashContainer.jsp), the Flash content changes based on the link that is clicked. The code responsible for rendering the Flash looks like this: <object height="100%" align="l" width="100%" id="player" codebase= ...

What is the process for converting plain text into an image tag using the methods ".replace()" and ".html()"?

My goal is to customize this particular answer so that it can transform classic BCCode [img]{url}[/img] into an HTML image. In the code snippet provided, I have successfully implemented something similar with [b]text[/b]. However, when attempting to use [i ...

Unable to access the uploaded file on the server

Scenario : When a user uploads an image and clicks on the "save" button, I successfully save the image on the server with 777 permission granted to the folder... https://i.sstatic.net/gcIYk.png Problem : However, when I try to open the image, it does n ...

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

Encountered a parsing error when attempting to integrate SCSS with webpack and babel setup

I am facing an issue while trying to integrate SCSS into my webpack and babel setup. When running npm run build, I encounter an error that I'm unfamiliar with. As a beginner in using webpack and babel, I'm unsure about the necessary changes requ ...

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I h ...

Limiting multiple checkbox inputs in a React application can be easily achieved by utilizing React

Trying to create a form where the user can only check three boxes and uncheck them. The decrement on setCurrentData(currentData - 1) is not working as expected. Even after deselecting, the currentData remains at 3, preventing the user from checking any mo ...

Received an unexpected character '?' in NextJS

After setting up a fresh installation of Ubuntu 22.04.1 LTS and installing npm and docker, I encountered an issue while trying to start my NextJS web server with the command npm run dev. An error message appeared as follows: niklas@srv-code01:~/Desktop/Co ...

Retrieving XML using JavaScript with AJAX

Having trouble retrieving XML data using JavaScript and Ajax. The script takes too long (up to 45 seconds) to collect the data from the database and return it as XML. Everything works fine when loading the data locally, so no issues with cross-domain. An ...

Encountering difficulties in linking socket.io node server to react frontend. Receiving a "404 (Not Found) error for "POST http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MoHNIJT"

I have set up a frontend using React and a backend with Express Node.js. I am utilizing socket.io for communication between the client and server. Upon loading the React page, I encounter an error message that repeats every second: Failed to load resourc ...

How to modify the background color in Material Ui's datepicker?

Is there a way to customize the background color of my Material UI datepicker modal? To change the colors, you can use the createMuiTheme function from "@material-ui/core": const materialTheme = createMuiTheme({ overrides: { MuiPickersToolbar: ...

Obtaining the total of all values in an object using ng-repeat

It seems like I might be overlooking a fundamental concept here, and I could really use some guidance. I have a set of data that appears like this: "playerPoints"{ "ted":{"military":3,"gold":2}, "bill":{"military":2,"gold":4} } I am using ng-rep ...

Tips for working with elements in WebDriver that are created dynamically by JavaScript

As a novice in automation using Java and WebDriver, I find myself facing a particular issue: Browse for a specific customer Select a new customer type from a dropdown menu Click on the Save button Outcome: Upon trying to change the customer, a message p ...

Managing the verification of data existence in the ExpressJS service layer or controller

Working on a medium-sized website, I realized the importance of writing maintainable code with a better project structure. After stumbling upon this insightful article and some others discussing the benefits of 3-layer architecture, I found the concept qu ...

Experience the power of ReactJS as you utilize the componentDidMount lifecycle method to fetch data

Currently, I am in the process of learning how to utilize ReactJS, Spotify API, and Promises. My goal is to retrieve top albums from musicians on Spotify and play a 30-second snippet of their tracks. I have decided to work with a Spotify package known as ...

@vx/enhanced responsiveness with TypeScript

I am currently utilizing the @vx/responsive library in an attempt to retrieve the width of a parent component. Below are snippets from my code: import * as React from 'react' import { inject, observer } from 'mobx-react' import { IGlob ...

Tips on displaying JSON data in the browser console using console.log for API consumption

I'm having trouble creating an api to output data parsed from an xml file. When I console.log the necessary data, it shows up fine, but when I try to display it in the browser, I only get an empty array. Any suggestions on what could be causing this i ...