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

Receiving reliable information from an API in my Node server without experiencing any disruptions

A node server is being utilized to retrieve trades data from Binance. With more than a thousand pairs for which trades need to be fetched, the function takes some time to execute completely. To ensure that new data keeps coming in while the server is live ...

javascriptnode.js

Creating a personalized and versatile table component with unique functionality: where to begin?

Looking to create a versatile table component that can adapt for both desktop and mobile versions. If the screen width is below 720px, it should display a table using div, ul, li elements with a "load more" button at the bottom. If the screen width i ...

javascriptreactjsfrontendreact-dom

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Recently diving into Angular and facing a perplexing issue: "openClose is not defined at HTMLButtonElement.onclick (index:13)" Even after scouring through various resources, the error seems to be rooted in the index page rather than within any of the app ...

javascripthtmlangulartypescript

Similar to Angular ui-router 1.0.3, what is the equivalent function for reloadOn

After updating to UI-router v1.0.3 from v0.3.2, I noticed that the reloadOnSearch feature has been removed from the stateConfig. I'm having trouble finding the equivalent of reloadOnSearch in v1.0.3. It doesn't seem to be documented anywhere. A ...

javascriptangularjsangular-ui-router

"Efficiently transferring a large file using AJAX and sending it via POST to a

I am facing a challenge with a small script that I am developing. The script is designed to download relatively large files (around 15Mb each) from one domain using AJAX, and then upload/post them to another domain also through AJAX. Downloading the files ...

javascriptphpajax

Leverage all the documents obtained from a collection to reference in a Vue component

I am attempting to display all documents from a Firestore collection in a table using refs, but I am unsure about accessing each field for template ref. getDocs(collection(db, "usr")) .then((querySnapshot) => { querySnapshot.forEach((doc ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuejs3

The implementation of useState is not functioning properly when used within a parent useState function

I am currently working with a Ticket child class where I set the total amount after changing the number of tickets. The issue I am encountering is that the setNumber function doesn't seem to work properly unless the setTotal function is commented out. ...

javascripttypescriptnext.jsevent-handlingstate

Tips for customizing the appearance of an HTML5 progress bar using JQuery

Here is my method for obtaining the bar: let bar = $('#progressbar'); Styling and animating it is no problem, using either of these methods: bar.css(...) bar.animate(...) However, I am wondering how to adjust the CSS specifically for the prog ...

jquerycsshtmlanimationstyles

Having trouble importing a React component from a different directory?

I have included the folder structure for reference. Is there a way to successfully import the image component into the card component? No matter which path I try, I keep encountering this error: ./src/Components/Card/Card.js Module not found: Can't ...

javascriptreactjsreact-native

Leveraging AngularJS html5mode in conjunction with express.js

Client-side: when("/page/:id", { templateUrl: "partials/note-tpl.html", controller : "AppPageController" }); $locationProvider.html5Mode( true ); Html: <a ng-href="/page/{{Page._id}}">{{Page.name}}</a> Server-side: app.use("/pag ...

javascriptnode.jsangularjsexpress

Error occurs when attempting to change the color of a dynamically generated div, resulting in the message: "Type Error: Unable to assign a value to the property '

I'm facing an issue with my code where I have a parent div that loads with a random color, and upon clicking a button, it should create a new colored div inside. However, I keep encountering the following error: TypeError: Cannot set property ' ...

javascriptvue.js

Could anyone clarify the concept of how a function is able to be equivalent to zero?

function checkForSpecialCharacters(text) { var specialChars = [";", "!", ".", "?", ",", "-"]; for(var i = 0; i < specialChars.length; i++) { if(text.indexOf(specialChars[i]) !== -1) { return true; } } ...

javascript

Tips for Displaying and Concealing Tables Using Radio Buttons

Does anyone know how to refactor the jQuery code to toggle between two selection options (Yes and No)? This is the jQuery code I have tried: $(document).ready(function() { $("#send_to_one").hide(); $("input:radio[name='decision']").chan ...

javascriptjqueryhtmlruby-on-railsradio-button

Displaying a JQuery loading image on a webpage for a designated amount of time

I am trying to display an image in a div once a price calculation function is called. The image should cover the whole page. Can someone assist me with this? <div class="Progress_Layout" style="display:none"> <div class="Progress_Content"> ...

javascriptjquery

Effortlessly sending information to the Material UI 'Table' element within a ReactJS application

I have integrated a materialUI built-in component to display data on my website. While the code closely resembles examples from the MaterialUI API site, I have customized it for my specific use case with five labeled columns. You can view my code below: h ...

javascriptreactjstypescriptmaterial-uireact-props

What are the essential tools needed to extract, interact, and evaluate information from a webpage?

Just trying to figure out the most effective plan of action and required tools/frameworks for this task: 1. Access webpage 2. Navigate to specific page by clicking buttons and filling in text boxes for search 3-4 Repeat 3. Retrieve HTML from page and s ...

htmlpython-2.7seleniumscrapy

The concept of recursion in AngularJS directives

I developed a unique custom directive. angular.module('menu',[]) .directive('MenuDirective',function(){ return{ restrict:'E', replace:'true', scope:{ m ...

javascripthtmlangularjs

Navigating state: (TypeError): The mapping function for this.state.[something] is invalid

I am currently working on iterating through my state, which contains data retrieved from an external API. However, I encountered this error message: TypeError: this.state.stocks.map is not a function My goal is to display the results on the frontend dyn ...

javascriptreactjs

Extract the sub-element within a parent element using Vue event handling

Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...

javascriptvue.js

Encountered a 404 Error when attempting to store data in mongoDb using node.js and express

Currently, I am facing an issue while trying to save data from Bootstrap input fields into my MongoDB database. Every time I attempt to do so, I encounter the error insertMovie:1 POST http://localhost:3000/insertMovie 404 (Not Found). Despite my efforts to ...

javascriptnode.jsmongodbexpress