Issue with Ng-style not functioning properly when setting background color

I am struggling to set the background of an element using a configuration object with ng-style. For some unknown reason, I can't seem to make it work and I'm finding it really perplexing.

The element I'm attempting to configure:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>

In this context, pblc represents the controller as I'm utilizing the controllerAs option.

The configuration object:

this.progressLOptions = {
    color: '#F0F3F4',
    width: '200px',
    height: '20px',
};

What's most puzzling is that the width and height are being applied, as seen in the rendered HTML:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>

I am stumped as to why ng-style is behaving oddly. Could there be an issue with setting the background color that I am overlooking?

javascripthtmlcssangularjsng-style

Answer №1

Updated response: It appears there is a small error - you are using plbc.options.color instead of pblc.options.color

The main potential issue could be that plbc.options.color is either not defined, empty, out of scope, or incorrectly configured. This assumption is made assuming there are no syntax errors present.

To troubleshoot, try displaying it as an expression in the template - {{plbc.options.color}} and verify its content.

Answer №2

I made some adjustments to your code, please take a look

    <div id="progress-l" ng-style="{ 'width': progressLOptions.width, 'height': progressLOptions.height, 'background': progressLOptions.color }" style="width: 200px; height: 20px;">
   </div>

JS

   $scope.progressLOptions = {
    color: '#000',
     width: '200px',
    height: '20px',
   };

It's functioning correctly now. Use $scope instead of this, or if you prefer using this.progressLoptions then in HTML use 

<body ng-controller="somename as controllerName"> 
and then access this using somename.functionName

Demo : https://jsbin.com/zihazi/edit?html,js,output

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

programming / mathematics - incorrect circular item rotation

I need help arranging a sequence of planes in a circular formation, all facing toward the center. However, I seem to be experiencing issues with the rotation after crossing the 180-degree mark. While my objects are correctly positioned around the circle, t ...

javascriptmathgeometrythree.js

Shuffle a Document Fragment in a random order before adding it to the DOM using JavaScript

My JavaScript code is generating a text area and button dynamically. I have successfully implemented it so that when a value is entered into the text area and the button is clicked, a random number of SPAN tags are created. Each character from the input va ...

javascriptdomrandomshuffledocumentfragment

Web browsers such as Chrome and Internet Explorer, along with the AngularJS framework, and the Access

In the process of creating a web application using AngularJS that I plan to distribute via CDs, I encountered a major obstacle related to the same origin policy in Chrome and IE. Specifically, I received the following error message: XMLHttpRequest cannot ...

internet-explorergoogle-chromeangularjs

Consistently adjusting the size of a <textarea> across various browsers such as IE, FF, Safari, and

My <textarea> needs to fit into a space that is a percentage of the screen size, but I'm encountering some issues with different browsers. In FireFox, I am able to achieve good results by setting the CSS properties as follows: #container { width ...

csscross-browsertextarea

An issue arose during the installation of nodemon and jest, about errors with versions and a pes

Currently, I am facing an issue while trying to set up jest and nodemon for my nodejs project. My development environment includes vscode, npm version 6.13.7, and node version 13.8.0. Whenever I try to install nodemon via the command line, the console disp ...

javascriptnode.jsnpmjestjsweb-development-server

Selenium tactics: patiently awaiting the arrival of a specific element

I am fairly new to Selenium, so please bear with me as I ask some potentially simple questions. Lately, I've been exploring ways to make Selenium wait until a specific element is fully loaded within a pop-up <div>. My goal is to scroll down to c ...

pythonhtmlselenium

Why is npm attempting to compile a previous version of my code?

Being a complete newbie to npm and node.js, I hope you can bear with me if I'm lacking in providing the right details. I am working on developing a plugin for a website that utilizes an out-of-the-box framework within npm. Initially, everything was ru ...

javascriptnode.jsnpm

Using JavaScript to disable and re-enable an ASP.NET Timer control

I currently have a webpage built with ASP.Net that includes an ASP:Timer control <asp:Timer ID="TimerRefresh" runat="server" Interval="5000" Enabled="true" OnTick="TimerRefresh_Tick"> </asp:Timer> It is connected to an asp:UpdatePanel on the ...

asp.netjavascripttimer

Easily upload files using Multer without the need for specifying action, method, or encrypt="multipart/form-data" attributes in the form tag

I'm currently facing an issue while trying to upload an image using Multer and Angular's $http.post method. Instead of triggering the form submission with a submit button, I want to directly use $http.post. However, I am encountering a problem wh ...

angularjsnode.jsexpressfile-uploadmulter

Implementing a Responsive Form on an Image Using Bootstrap

I am facing a challenge where I need to position a form on top of a Responsive Image. My goal is to ensure that the form is responsive as well and adjusts its size according to the image. As of now, the image is responsive but I am struggling to make the ...

htmlcssformstwitter-bootstrap

Automatically, the "ng-hide" class gets added despite using the correct syntax for ng-show

I am trying to dynamically show/hide a tr tag within a table based on the value of a scope variable in the controller. Despite writing the code correctly, I am facing an issue where the "ng-hide" class is automatically added to the tr tag every time it is ...

javascriptjqueryangularjshtmlcss

Utilizing HTML styling within a label component

The formatting of the HTML is working perfectly in this scenario. The last name is displayed with a font size of 5. lblWelcome.Text = "Welcome:<font size=''5''>" & txtSurname.Text & "</font>" Why is the HTML style ...

asp.nethtmlformattingcoding-style

Make sure to include all enum type values within the function's body to ensure comprehensive coverage

I am defining an enumeration called ApiFunctions with values like "HIDE", "SET_READ_ONLY", and "DESCRIPTION". Also, I have a type ValueOfApiFunction that should include all values of ApiFunctions. Additionally, I have a logic that listens for messages on ...

javascripttypescriptcompiler-errorslogic

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

javascriptangularjs

What is the best way to utilize purgeCss in conjunction with other module exports?

After reading the documentation, I want to integrate purgeCss into my NextJS project. The recommended configuration in the docs suggests updating the next.config.js file like this: module.exports = withCss(withPurgeCss()) However, I am unsure where exact ...

javascriptnext.jspostcsscss-purge

How to eliminate rows with images in Exceljs

I created a worksheet with an image in each row. However, when I filter or remove a row, the image for that row stays visible. I tested this on versions v4.4.0 and v4.3.0 I attempted various methods of adding images, but none of them seemed to work. Initi ...

javascriptnode.jsexceljs

Using template expressions to access properties that contain spaces

Here is the code structure that I am working with: "name": { "age": [ { "data": { "how old": "23" } }, One of my JSON keys has a space in it. How can I access this pr ...

javascripthtmlangular

What is the method to retrieve the ID name of an HTML tag based on its value?

Is there a way to determine the ID of an HTML tag based on its content? For example, if I have the following textboxes: I need to identify the id with the value "A2" So the expected result is id=option2 because its value is A2 <input type="text ...

javascriptjqueryhtml

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

htmlcsslistvue.js

Searching for all potential arrays of length L that total N or fewer can be achieved using an algorithm

In JavaScript, I am looking for a way to discover all potential arrays - consisting of non-negative integers - with a size L that add up to - at most - N: function findArrays(size, maxSum){} For example: findArrays(3, 2) Sample output: [[0,0,0], [0,0,1], ...

javascriptarraysalgorithm