Loop through an array with varying property sizes and apply individual styles to each corresponding div

I am working with an array of 50 squares, each with randomly generated side lengths. My goal is to loop through the array using ng-repeat and style each square uniquely based on its side length. Any suggestions?

<div ng-controller="ShapesController as sc" ng-init="sc.displaySorted()">
  <div class="square" ng-repeat="sq in sc.shapesToDisplaySq" style="width:" + sq.sideLength + "px" + ";height:" + sq.sideLength + "px" + ";">
    {{sq}}
  </div>
</div>

The shapesToDisplay array contains objects with different sideLength values. I just need help translating these values into CSS styles. Thanks!

Console screenshot of square objects DOM screenshot of {{sq}}

javascriptangularjsarraysangularjs-ng-repeat

Answer №1

Thank you for your help! I attempted the solution, but unfortunately it does not appear to be functioning correctly. Upon inspection, an error indicating an invalid property value is presented. View Inspector screenshot.

Below is the current code I am working with:

<div ng-controller="ShapesController as sc" ng-init="sc.displaySorted()">
  <div class="square" ng-repeat="sq in sc.shapesToDisplaySq" style="width: {{sq.sideLength}}; length: {{sq.sideLength}}">
    {{sq}}
  </div>

</div>

I also made an attempt to include !important: View !important screenshot

Answer №2

It is important to remember to utilize double curly brackets {{}} when applying styles.

<div ng-controller="ShapesController as sc" ng-init="sc.displaySorted()">
  <div class="circle" ng-repeat="cir in sc.shapesToDisplayCir" style="diameter: {{cir.radius * 2}}px;">
    {{cir}}
  </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

Caution: "Detected x instances with duplicate IDs" in the REACTJS API REST

I am facing an issue with my form. The console is displaying a warning "Found x(number of books) elements with non-unique id". As a result, the information displayed for each book is duplicated because the id is not being recognized. I need help in ident ...

javascriptreactjsformsapiinput

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

javascriptangularjshtmlscopedata-modeling

Guide to developing and showcasing a proof of concept (PoC) for a Google Chrome vulnerability using Out of Bounds (oob) method

While reading through an article discussing the Proof of Concept of a CVE in Google Chrome (OOB issue), I came across this intriguing code snippet: (https://medium.com/@elniak/cve-2024-4761-exploiting-chromes-javascript-engine-highly-exploited-poc-presente ...

javascriptgoogle-chromesecuritycve

Is there a way to incorporate arguments into my discord.js commands?

Hey there! I'm looking to enhance my Discord commands by adding arguments, such as !ban {username}. Any tips or guidance on the best approach for this would be amazing! const Bot = new Discord.Bot({ intents: ["GUILD_MESSAGES", "GUIL ...

javascriptnode.jsdiscorddiscord.js

Can we output the multArray in the print() subroutine within the createArray() function?

I need to implement two sub-programs called createArray() and print(). The print() function will require access to the multArray variable created in createArray(). Currently, I have designed the program in a way that the array is not locally created in t ...

javaarraysmethods

The array is present both before and after the res.json() call, however it appears empty in the response

When using Express to send a json response with res.json(), I am experiencing an issue where the value of records in the object sent via res.json() is empty. My code snippet looks like this: stats.activities(params).then(res => { processActivities ...

javascriptnode.jsexpress

`Select a new preview image by clicking on the provided images`

Check out the following code snippet showcasing the implementation of a preview image and a list of images on a web page: <div class="col-lg-5 text-center"> <img src="img/1.jpeg"> //preview image <hr> ...

javascriptjqueryajax

Why isn't my mongoose update function functioning properly?

After reviewing numerous questions on stackoverflow, I've made some modifications to this simple query that just won't work. I'm at a loss as to why... router.get('/users/:username/suspend', function(req, res){ var userna ...

javascriptnode.jsmongodbmongoose

Tips for giving a unique name to an array before including it in a collection of arrays in PHP

I am trying to figure out a way to name an array before adding it to a group of arrays. Below is the code that I have, which retrieves a list of files from a directory, reads the contents of each file, and adds them to an array. public function buildArray ...

phparrays

Vue project missing required NPM dependency

Everything was going smoothly with my Vue project. However, when I changed the file name of one component, I encountered an error. After fixing the code, I restarted the npm server by running npn run serve. That's when the following errors popped up: ...

javascriptnode.jsvue.jsnpm

What triggers the onmouseout event to occur?

Is the event triggered continuously whenever the mouse is not hovering over the element? Or is it a one-time action when the mouse exits the element? This distinction is crucial for me to determine when the mouse pointer leaves the element, while only wa ...

javascripteventsonmouseout

Ordering tables in Knockout.js based on either values or alphabetically

I have a dataset in tabular form and I've implemented a knockout binding handler for sorting the table data upon clicking. The current functionality sorts the values, but I need to enhance it to sort groups of data with the same value alphabetically b ...

jqueryhtmlarrayssortingknockout.js

Displaying a date and time beautifully in jQuery/JavaScript by providing the day of the week along with the specific time

Does anyone know of a Javascript library, preferably a jQuery plugin, that can take datetimes in any standard format (such as ISO 8601) and convert them into user-friendly strings like: Wednesday, 5:00pm Tomorrow, 9:00am Saturday, 11:00pm I'm not c ...

javascriptjquerydatetimejquery-pluginspretty-print

Encountering a data property error while trying to render ejs using axios

I am encountering an error message "TypeError: Cannot read property 'data' of undefined" when trying to display results.ejs using data from an API. Can someone help me identify what's incorrect with the rendering code? Thank you. index.js: ...

javascriptnode.jsexpressaxios

I am interested in generating a report for the protractor-html-reporter in the form of an .html file

Currently, I am conducting end-to-end testing using Protractor. To generate a comprehensive report of all the test cases, I have employed Protractor-html-reportor. This tool creates an .html file containing detailed information on each test case. Everyth ...

htmlangularjsprotractor

Insert the GET object into an empty object within the data and then send it back

Here is the Vue application I am working with: new Vue({ name: 'o365-edit-modal-wrapper', el: '#o365-modal-edit-wrapper', data: function() { return { list: {}, } }, created() { thi ...

javascriptvue.jsvuejs2

What is the best way to divide a library and its plugins into separate npm packages?

I am currently developing a JavaScript library that allows users to select specific plugins to add to their project along with the main library. However, I am facing some challenges with modules and webpack. To illustrate how the code is structured, I am w ...

javascriptnpmwebpack

Turning a Two Dimensional Object or Associate Array into a Three Dimensional Object using Javascript

Is there a method to transform the following: var stateDat = { ME: ['Maine',1328361], etc. }; Into this structure dynamically within a function? var stateDatHistory = { 1:[ ME: ['Maine',1328361], etc. ], 2:[ ME: ['Maine& ...

javascriptarraysobjectassociative-array

Can I input an array of values into a jQuery Knob for use?

Can I assign an array of values to my knob settings, like: 20,30,60,100,200,400,800 Is this feasible? Link to jQuery Knob GitHub repository ...

jqueryarrays

Inject the value of a JavaScript array into an HTML element

Is it feasible to transfer a global javascript array value to an HTML tag, particularly within an img (title) tag? I'm curious if the following is achievable: <img src="_info.gif" height="26" width="37" title=myArray[5]/> If it is possible, p ...

javascriptjqueryhtml