Attempting to apply styling to a div by utilizing ng-repeat

I'm attempting to modify the background color of a div using ng-repeat. The color I want is retrieved from the object in the loop. However, every time I try to do this, it sets my style property to blank.

Here's the code I have been using:

    <div ng-repeat="channel in channelObjects">
        <div class="mediumTile" style="background-color:#{{channel.Color}}">
           Channel Color: {{channel.color}}
        </div>
    </div>

This shows my mediumTile object with the correct channel color being displayed. But the style ends up empty once the page loads.

This is what appears on the page:

<div class="mediumTile" style="">
     Channel Color: 123456 
</div>

Any idea where I might be going wrong?

Answer №1

For a more reliable approach, it is recommended to use ng-style instead of inline styles. Interpolating styles directly may result in certain browsers stripping off the values before Angular has a chance to process them, particularly noticeable in IE.

<div class="mediumTile" ng-style="{'background-color':'#' + channel.color}">

Furthermore, pay attention to the correct casing of properties such as color.

Check out this Plnkr for reference.

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

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

Choosing a specific HTML element by index using jQuery

Currently implementing a slick carousel slider. After utilizing the events method to retrieve slide index numbers, how can I insert specific HTML tags for that particular index? ...

Ensuring that the header contains a centered element and a right-justified element, both aligned perfectly vertically

I'm currently working on creating a unique header design for my website, where I want one element to be centered and another element to be right-justified within the header. After brainstorming different approaches, I came up with the following metho ...

Utilizing the active tab feature within CSS

I am currently working with a detailed structure of bootstrap theme classes. Currently, I am in the process of designing a menu. This is the code snippet for the navigation bar design in Bootstrap- <div class="navbar navbar-fixed-top navbar-invers ...

Variable Scope is not defined in the TypeScript controller class of an AngularJS directive

I have implemented a custom directive to wrap ag grid like so: function MyDirective(): ng.IDirective { var directive = <ng.IDirective>{ restrict: "E", template: '<div style="width: 100%; height: 400px;" ag-grid="vm.agGrid ...

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

What is the best way to incorporate CSS into this HTML document?

Content has been omitted. It is crucial to review documentation in advance in order to reduce repetitive inquiries. Check out the Webpack v2 documentation. ...

unable to retrieve the .id attribute from a resource

When attempting to access $scope.mySlot.id, it appears to be undefined. $scope.removeMe = function() { var shouldRemove = confirm('Are you sure you want to remove yourself from this field trip?'); ...

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

Trouble arises with the jQuery keydown function

Currently, I am encountering an issue with a straightforward jQuery code implementation. In addition to the problem description, I have included the HTML structure below, The current functionality works as expected in setting focus on the input field upo ...

What are the best methods for maintaining the appearance of my website when resizing my browser window?

I am replicating the Twitter profile page, but I am facing an issue where the text and images get jumbled together whenever I resize my browser. This results in a messy appearance of the page. How can I ensure that the text and images stay in the same rela ...

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

Tips for implementing $setValidity with ng-if for the same field in Angular

Hey there, I'm currently facing an issue with using form.form_field.$setValidity on an ng-if tagged field. When testing out the code, I encountered the following error: angular.js:13642 TypeError: Cannot read property '$setValidity' of unde ...

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

Transform numbers into elements of an array and replace undefined with an empty array

Check out this Plunker example where a filter is implemented to allow select box options to be selected only once: http://plnkr.co/edit/BBqnTlxobUpiYxfhyJuj?p=preview .filter('arrayDiff', function() { return function(array, diff) { console.log ...

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly. For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load. The paragraphs slide s ...

What is the best way to choose elements that are not followed by a specific element?

My HTML structure consists of repeating pairs of img and p tags. Often, the img tag is missing from the sequence. <img> <p></p> <img> <p></p> <img> <p></p> <p></p> <p></p> <i ...

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

Invoke Javascript through CSS selector

On my webpage, I have implemented a mousemove-mask feature that was inspired by an existing codepen. However, there is one significant issue that I can't seem to resolve on my own. Despite my attempts to fix it, I believe someone with more expertise c ...