Incorporate a background only if the specified condition in AngularJS is met, utilizing ng-style

I'm struggling to incorporate a background url style based on a given condition. I tried using data-ng-style, but for some unknown reason, it's not working as expected. I'm not sure where I'm going wrong.

data-ng-style="true : {'background-image': 'url(' + getThumbnailUrl(item) + ')'}, false : {}[item.thumbnailClass === undefined]"

In essence, I want to set the background image using data-ng-style if thumbnailClass is undefined; otherwise, I want to leave it unchanged.

You can check out my code in this JSFiddle: http://jsfiddle.net/Lvc0u55v/5666/. In this example, we can consider 'fafa' to be a boolean – apply the style when true and do nothing when false.

Any ideas on how to achieve this in AngularJS? Thank you.

javascriptcssangularjs

Answer №1

It seems like there is a small error in your syntax. Here is the corrected version:

data-ng-style="{'background-image': (item.thumbnailClass === undefined) ? 'url(' + getThumbnailUrl(item) + ')' : ''}"

Answer №2

To achieve this, you can utilize the ng-class directive in AngularJS. Consider implementing something along these lines:

In your stylesheet:

.customBackground {
    background-image: url('someImage.jpg');
}

In your HTML element (for illustration purposes, let's use a div):

<div ng-class="{customBackground: showCustomBackground}">
   <h3> Something </h3>
</div>

Answer №3

One way to implement this in the controller is shown below:

if(condition){
  $scope.customStyle = {
    "background-color": "coral",
  };
} else {
   $scope.customStyle = {};
}

In the HTML, you can use ng-style="customStyle"

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

Is there a way for me to personalize the background of the mui-material datagrid header?

I am looking to update the background design of Mui Datagrid from this image to this image However, I am encountering an issue where the background color does not fully cover the header. I have attempted using "cellClassName:" in the columns but it has n ...

javascriptcssreactjsmaterial-uidatagrid

What are the Functions of Ctrl-K on Stack Overflow?

I'm intrigued by how to incorporate the Ctrl+K (code sample) feature for code. For example: public static void main(String args[]){ System.out.println.out("welcome"); } Is there a way to nicely format this? Do we need any specific package to ...

javascriptcsscode-formatting

The text fields keep duplicating when the checkbox is unchecked

There are check boxes for Firstname, Lastname, and Email. Clicking on a checkbox should display the corresponding input type, and unchecking it should remove the input field. I am also attempting to retrieve the label of the selected checkbox without succ ...

javascriptjqueryhtmlcheckbox

What is the reason behind the quicker search for the median in a 100-item array compared to a 10-item array?

I conducted experiments to verify this, and the results were not entirely as anticipated: http://jsperf.com/value-in-array-or-object Feel free to run your own tests as well. ...

javascriptarraysperformance

Create a div element that opens upon clicking the first checkbox with the help of AngularJS version 1.5.0

I am new to Angular and trying to learn. I created a list of checkboxes using ng-repeat, with five checkboxes in total. I want to open a specific div only when the first checkbox is clicked, but I'm not sure how to do this. Plunker https://i.sstatic ...

angularjscheckboxangularjs-scope

What is the significance of receiving an error in Internet Explorer when running the code below?

function checkStepValidity(isValid, dataModel) { if (isValid) { updatedDataModel = mergeObjects(this.updatedDataModel, dataModel); } }, The code above encounters the following error in Internet Explorer / Edge browse ...

javascriptvue.js

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

cssresponsive-design

Loading JSON data into HTML elements using jQuery

I am currently grappling with coding a section where I integrate data from a JSON file into my HTML using jQuery. As a newbie to jQuery, I find myself at a standstill. https://jsfiddle.net/to53xxbd/ Here is the snippet of HTML: <ul id="list"> ...

javascriptjqueryjson

Why aren't my Post Variables being passed through my jQuery Ajax Request?

My goal is to utilize a full calendar ajax call to add events to the database. After testing the PDO query separately and confirming its functionality, I have identified an issue with the ajax post. The code snippet below showcases the ajax call in defaul ...

javascriptphpjqueryajax

The conditional logic in AngularJS is not functioning as expected

https://i.sstatic.net/RvqYQ.pngMy code seems to have an issue with the if/else statement. I am checking the value of data.success which should contain either true or false. However, when I use (data.success === true) in the if statement, the else block e ...

javascriptangularjs

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Having trouble running classes using Maven test with the Testng.xml file in the terminal, however, it runs smoothly in Eclipse

While I have been successful in running my solution through the testng suit in the Eclipse console, I am facing difficulties executing the testng.xml file via Maven integrated with Sauce Labs in the terminal. Output received on the terminal: ------------ ...

javascriptseleniumselenium-webdrivermaven-2saucelabs

Using the ng-options directive in Angular.js, add "| LimitTo" to limit the options displayed

I am a beginner in Angular.js. I am currently working on implementing a dropdown menu that displays a list of cities from Colombia and the United States. Using "ng-option", I am trying to limit the city names displayed in the dropdown to 10 characters wit ...

angularjs

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

I am facing an issue with a simple div that has a transition effect. It goes from a yellow background to a red one. <div class="bar" ng-class="{'bar-visible': vm.visible}"> The transition works smoothly when the bar-visible class is added ...

angularjscsscss-transitionsng-animate

How about this: "Effortlessly upload files by simply dragging and dropping them from your computer to

Currently, I am facing a challenge in uploading a picture from my PC to a website that utilizes a drag and drop interface. Despite using Javascript to open the required link, set properties, and click on the upload field, a file manager window appears wh ...

javascriptnode.jsuploaddrag-and-drop

Leveraging Discord.JS to seamlessly transport users in Discord to their designated voice channel by assigning roles

I'm attempting to transfer all users with a specific role from a voice channel using a command like: !summon @role This command should bring only the users with that specific role to the voice channel where the command was entered My current code is ...

javascriptnode.jsforeachdiscorddiscord.js

How do I switch the language and voice for the output in Azure's text-to-voice feature?

Looking for some JavaScript assistance with changing language and voice settings in my code. I have tried searching online but haven't found a solution that fits my skill level. If anyone could provide help with modifying the code, it would be greatl ...

javascriptazuretext-to-speechvoice

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

javascriptjquerycss

Unexpected behavior observed with LitHTML when binding value to input type range

Currently, I am working on an implementation that involves using range inputs. Specifically, I have two range inputs and I am trying to create a 'double range' functionality with them. The challenge I am facing is related to preventing one slider ...

javascripthtmllit-elementlitlit-html

Tips on managing errors in a router with the help of middleware

Currently, I am utilizing node and express to create a server. However, there seems to be an issue where errors that occur within a router are not being properly handled, causing the entire server to crash: In my Server.js file: import SubRouter from &apo ...

javascriptnode.jsexpress