Establish the style of a div using the value of an Angular scope

I am working on displaying the percentage of some activity using a horizontal div. The setup involves an outer div with a width of 100% and an inner div. I need to fill the inner div with a background color based on the percentage value obtained from the controller. However, my issue is that the percentage value is stored in a $scope variable called 'percentage'.

Here is the code snippet:

<div class="outerDiv">
<div class="innerDiv" style="'width':{{percentage}}"></div>

The value of {{percentage}} comes from my scope. Unfortunately, the current code is not working as expected. What I aim to achieve is setting the style for the div using the value from the scope. Your assistance would be greatly appreciated.

javascripthtmlcssangularjs

Answer №1

To set the width using AngularJS you can use ng-style="{'width' : width}

In the controller, assign a value to the width variable:

$scope.width = '50%';

Answer №2

To make your code function without the need for ng-style, you should remove the single quote ('width':{{percentage}}) and instead use width:{{percentage}}px. This will ensure proper styling for your variable.

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.percentage = '20%';
});
.outerDiv {
  height: 100px;
  background: gray;
}

.innerDiv {
  height: 100%;
  background: blue;
  width: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="outerDiv" ng-app="app" ng-controller="ctrl">
  <div class="innerDiv" style="width:{{percentage}}"></div>
</div>

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

When converting to TypeScript, the error 'express.Router() is not defined' may

Currently, I am in the process of converting my express nodejs project from JavaScript to TypeScript. One of the changes I've made is renaming the file extension and updating 'var' to 'import' for "require()". However, there seems ...

javascriptnode.jsexpresstypescriptmean-stack

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data fr ...

javascripthtmlcssvue.jssass

Is it possible for an HTML checkbox value to store a boolean rather than a string?

Strings are held by HTML Input values. For instance: This stores the string "yes". <input type="checkbox" name="checkThis" value="yes"> Nevertheless, for checkboxes it is sometimes beneficial if the value was a boolea ...

htmlforms

Strategies for enabling form resubmission in AngularJS when encountering a Sequelize validation error

Having issues with the form.$valid property in my SignUp controller for user registration. It seems to be stuck at false when a validation error is thrown by Sequelize. Any suggestions on what I should modify in my controller? Perhaps resetting the $vali ...

javascriptangularjs

What is the process for retrieving the user's information following successful social media login?

I have implemented Firebase for authentication in plain JavaScript, without using any frameworks like AngularJS or Angular2. When a user signs up successfully with Google or Facebook, I want to display their name, email, and profile picture. firebase.auth ...

javascriptfirebasefirebase-authentication

Retrieve a compilation of Whole Foods locations through the use of rvest

I want to retrieve a list of Whole Foods stores using the rvest package. I've successfully extracted information from various sources like Wikipedia, FIFA, and Yahoo! Finance using this method. However, in this case, the table spans multiple pages but ...

htmlrweb-scrapinghtml-parsingrvest

Nested tables with repeated data using AngularJS' ng-repeat functionality

As a newcomer to angularjs and web-development, I am facing a challenge with using ng-repeat to display data in a complex table structure, like this: A B C D abc pqr xyz std Here is the code snippet: <div class="table-responsive"> ...

javascriptcssangularjshtml

Unable to extract all elements using simple HTML dom when parsing RSS feed

I've been attempting to extract various details like titles, descriptions, links, images, and dates from an RSS feed located at . However, for some reason, I am unable to retrieve the link tag and image source within the feed. The rest of the data ext ...

phphtmlrss

Top method for integrating configuration into a module

I'm trying to create a module called something.js that depends on a configuration, but I don't want the module itself to explicitly require the config. Additionally, I need my code editor to be able to analyze the module and provide autocomplete ...

javascriptnode.jsmodulerequire

Displaying a message when there are no results in Vue.js using transition-group and encountering the error message "children must be keyed

Utilizing vue.js, I crafted a small data filter tool that boasts sleek transitions for added flair. However, I encountered an issue with displaying a message when there are no results matching the current filters. Here's what I attempted: <transit ...

javascriptvue.jsvuejs2vue-component

An issue occurred when attempting to add @nguniversal/express-engine@next with ng add command

Issue I have been attempting to integrate SEO features into my Angular project by executing "ng add @nguniversal/express-engine@next", however, I keep encountering an error message: An uncaught exception occurred: Cannot locate module '@schematics/ ...

javascriptangularseoserver-side-rendering

Problems during the installation of Webpack

Encountering Error Setting up Webpack and Babel with NPM npm ERR! Unexpected end of JSON input while parsing near '...pdragon":"^0.7.0","to' npm ERR! A complete log of this run can be found in: npm ERR! A complete log of this run can be found ...

javascriptnpmwebpackinstallation

Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS c ...

htmlcsstizen

Retrieve the path name of where the user clicked in Next.JS

In a situation where a button is contained in a <Nav/> component shared between two different components, clicking the button triggers the display of a <FileUpload/> component. It is possible to access the <FileUpload/> component from: & ...

javascriptreactjsnext.js

Determine the Availability of a URL with AngularJS

Looking for a way to verify the existence of a URL like www.testsite.com/mypage using AngularJS. Is this possible? Any suggestions from the community? ...

javascriptangularjs

The Sequelize association with belongsToMany is malfunctioning

The workbook I created Workbook = sequelize.define('Workbook', { isAssessment: { type: DataTypes.BOOLEAN, allowNull: false }, originalId: { type: DataTypes.STRING, allowNull: false } }, { classMethod ...

javascriptnode.jssequelize.js

Error: A surprise 'dot' token was found while defining the function

As part of my API development, I'm working on creating a register route. However, I encountered an issue when trying to utilize the User.function - AddUser method from my model file. The error message mentions an unexpected token .. Below is the code ...

javascriptexpressmongoose

Guide on achieving a seamless scrolling effect to an identifier following the selection of a hyperlink from a different webpage

Imagine you have a link on a webpage, <a href="https://example.com/#sample"><p>Click Me</a> When you click on that link, it immediately jumps to the specified id on the page. But what if instead of this abrupt jump, you want the page to ...

jqueryhtmlcss

Is it possible to execute a function once an element has finished loading?

I am facing a challenge with running the List_Sandbox functions after a specific each loop. This loop selects checkboxes that trigger a change event, rendering additional checkboxes that need to be selected. The issue arises when the List_Sandbox functio ...

javascriptjquery

What is the best way to create a CSS selector for a button with two classes within a .less file?

Here is my current CSS: button { background: @button-background; color: @text; &.focus { background-image: linear-gradient(#79d858, #569e3d); border-color: #4a993e; color: white; ...

css