Alter the background hue of alternate div elements within a row

Question

Alter the background hue of alternate div elements within a row

The table I have contains multiple div elements, each corresponding to an item in an array.

Within the table, there is a single tr, and the 1st and 2nd td are not directly related to the 3rd and 4th td.

Each td in the table repeats a div element for the length of an array. For example, the first column between Balance B/d and Income represents an array, and so does Income and subsequent elements.

Although I tried to apply a shaded-row style to every even row using ng-class, it didn't work as expected. Another method I considered was using .statement-item:nth-child(even), but this approach requires the removal of the parent statement-container. Is there a better solution?

    
    <!-- Table structure here -->

javascript html css angularjs

Answer 1

Answer №1

Consider checking the length of the previous collection in the 2nd repeater and based on whether it is even or odd, reverse your ng-class logic like this:

balanceArray.length % 2  ===  0 ? $index % 2 == 0 : $index % 2 != 0

By the way, if there is no specific reason for separating them with a container, it might be more efficient to keep all items together and manipulate the styling with CSS (using odd/even child selectors).

Answer 2

Consider checking the length of the previous collection in the 2nd repeater and based on whether it is even or odd, reverse your ng-class logic like this:

balanceArray.length % 2  ===  0 ? $index % 2 == 0 : $index % 2 != 0

By the way, if there is no specific reason for separating them with a container, it might be more efficient to keep all items together and manipulate the styling with CSS (using odd/even child selectors).

Answer 3

Answer №2

How about this concept: develop a function that stores an array of random colors and chooses one randomly. Check out the example below:

getRandomColor() {
    let colors = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff'];

    let randomColor = colors[Math.floor(Math.random() * colors.length)];

    return randomColor;
}

Alternatively, you could establish a global variable array with objects structured like this:

var colorsArray = [{color: '#fff', used: false}, {color: '#000', used: true}];

Then you could create a function that iterates over that array:

let selectedColor = '';

for(let i = 0; i < colorsArray.length; i++) {
  if(!colorsArray[i].used) {
    colorsArray[i].used = true;
    selectedColor = colorsArray[i].color;
    break;
  }
}

return selectedColor;

You might be able to implement something like

ng-style="{'background-color' : getRandomColor()}"

(I'm not very knowledgeable about Angular, so please forgive any mistakes.)

I hope this suggestion helps kickstart your project.

Answer 4

How about this concept: develop a function that stores an array of random colors and chooses one randomly. Check out the example below:

getRandomColor() {
    let colors = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff'];

    let randomColor = colors[Math.floor(Math.random() * colors.length)];

    return randomColor;
}

Alternatively, you could establish a global variable array with objects structured like this:

var colorsArray = [{color: '#fff', used: false}, {color: '#000', used: true}];

Then you could create a function that iterates over that array:

let selectedColor = '';

for(let i = 0; i < colorsArray.length; i++) {
  if(!colorsArray[i].used) {
    colorsArray[i].used = true;
    selectedColor = colorsArray[i].color;
    break;
  }
}

return selectedColor;

You might be able to implement something like

ng-style="{'background-color' : getRandomColor()}"

(I'm not very knowledgeable about Angular, so please forgive any mistakes.)

I hope this suggestion helps kickstart your project.

Alter the background hue of alternate div elements within a row

Answer №1

Answer №2

Similar questions

Attempting to interact with the <Button> element, within selenium web driver utilizing python

Hiding a div using swipe gestures in Angular

Creating multiple rectangles and filling them with a color chosen by the user in Angular can be achieved by following these steps

Fixing the Jquery animation glitch triggered by mouseover and mouseout

Ways to have a function return a promise from the final "then" in a series of promises

What is the best way to show an on/off button in an HTML page when it loads, based on a value stored in a MySQL database?

Tips on triggering an AJAX call to load additional content when a user reaches the bottom of the page for the first time

Best Practices for Handling Form State in ReactJS with Redux

What is causing the container to overlap with my sidebar-like <nav>?

AngularJS fails to prioritize the following element

Filtering of currency with no zero in Angular1.x

Selecting elements by class in jQuery using a variable for the class name

.then function not functioning properly in Axios DELETE request in a React project

The error message javax.ws.rs.NotFoundException: HTTP 404 Not Found pertains to Angular 1.5

Verify the validation of the text box

Begin a new countdown timer upon clicking the next button

Apply the transition property to all elements except for the text inside a specific tag

Using Vue.js, you can set a method to return data directly to

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

The div needs to be positioned above another div, not beneath it