Ways to adjust the color of a div

Question

Ways to adjust the color of a div

I'm currently working on an app using Angular.js and HTML, but I've hit a roadblock.

There's a dropdown at the top, and when it changes, I want to adjust the background color of certain cells as shown in this image: https://i.sstatic.net/OvhPH.png

Below is a snippet of my code:

HTML page

<div class="row">
        <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
            <h3 style="color: white">Time Slot</h3>
        </div>
        <div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center">
            {{time}}
        </div>
    </div>
    <!-- <div id="selectedDateRange"> -->
    <div class="row" ng-repeat="(dateindex, date) in dateArray">
        <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
            <h3 style="color: white">{{date}}</h3>
        </div>
        <div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == datein
dex && selectedCell[1] == timeindex}"></div>
    </div>

Controller.js code

Here is the click event for the dropdown change:

    $(function () {
            $('#seldate').change(function () {

            //I need to change the color of the cell in the first row and first column
           //also, the color of the cell in the second row and second column should change
           })

         })

Any suggestions on how to change the background color of a cell?

Your help would be greatly appreciated! Thank you in advance!!

javascript jquery html css angularjs

Answer 1

Answer №1

Implement the track by $index in your ng-repeat directive.

Then, add a style attribute to the cell like this:

color : $index === 1 ? 'red' : 'green'

You can also explore using ng-style

Answer 2

Implement the track by $index in your ng-repeat directive.

Then, add a style attribute to the cell like this:

color : $index === 1 ? 'red' : 'green'

You can also explore using ng-style

Answer 3

Answer №2

If you want to update your content, consider implementing this code snippet (you can customize it further based on your needs)

<div class="row">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
    <h3 style="color: white">Time Slot</h3>
  </div>
  <div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center" ng-change="currentColor = time.color">
    {{time}}
  </div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
    <h3 style="color: white">{{date}}</h3>
  </div>
  <div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"  ng-style="{'background-color':currentColor}"></div>
</div>

To change the background color of a specific cell, consider setting a boolean or logic for that cell

Answer 4

If you want to update your content, consider implementing this code snippet (you can customize it further based on your needs)

<div class="row">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;background-color: #11c1f3;text-align: center;">
    <h3 style="color: white">Time Slot</h3>
  </div>
  <div class="col col1" ng-repeat="time in timeArray" style="background-color: #e0e0e0;text-align: center" ng-change="currentColor = time.color">
    {{time}}
  </div>
</div>
<!-- <div id="selectedDateRange"> -->
<div class="row" ng-repeat="(dateindex, date) in dateArray">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
    <h3 style="color: white">{{date}}</h3>
  </div>
  <div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"  ng-style="{'background-color':currentColor}"></div>
</div>

To change the background color of a specific cell, consider setting a boolean or logic for that cell

Answer 5

Answer №3

My preferred approach when handling situations like this involves adding an id element to the item that is being repeated. Then, in the onclick function, you can pass the element just as you have done. After that, you have the flexibility to modify it using jQuery or any other preferred method.

<div class="row" ng-repeat="(dateindex, date) in dateArray">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
    <h3 style="color: white" id="dateArray_{{dateindex}}>{{date}}</h3>
  </div>
  <div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"  ng-style="{'background-color':currentColor}"></div>

In your controller code:

$scope.selectCell = function(dateindex, timeindex){
  $("#dateArray_" + dateindex)
  .css({
    'color' : 'green'
  });
}

Answer 6

My preferred approach when handling situations like this involves adding an id element to the item that is being repeated. Then, in the onclick function, you can pass the element just as you have done. After that, you have the flexibility to modify it using jQuery or any other preferred method.

<div class="row" ng-repeat="(dateindex, date) in dateArray">
  <div class="col col1" style="-webkit-box-shadow: 0 0 20px 0px #999;text-align: center;">
    <h3 style="color: white" id="dateArray_{{dateindex}}>{{date}}</h3>
  </div>
  <div class="col col1" ng-repeat="(timeindex, time) in timeArray" ng-click="selectCell(dateindex, timeindex)" ng-class="{'selected': selectedCell[0] == dateindex && selectedCell[1] == timeindex}"  ng-style="{'background-color':currentColor}"></div>

In your controller code:

$scope.selectCell = function(dateindex, timeindex){
  $("#dateArray_" + dateindex)
  .css({
    'color' : 'green'
  });
}

Answer 7

Answer №4

Utilize ng-class in AngularJS to dynamically apply CSS properties

For example:

<p ng-class="bold:isBold"> Applying Dynamic Properties </p>
<input type="checkbox" ng-model="isBold">make text bold

When the value of isBold is true, the bold property will be applied

Pro Tip: You can apply multiple properties using ng-class

Answer 8

Utilize ng-class in AngularJS to dynamically apply CSS properties

For example:

<p ng-class="bold:isBold"> Applying Dynamic Properties </p>
<input type="checkbox" ng-model="isBold">make text bold

When the value of isBold is true, the bold property will be applied

Pro Tip: You can apply multiple properties using ng-class

Ways to adjust the color of a div

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to incorporate multiple calculations in JavaScript?

Creating dynamic tables with jquery mobile

Discovering Dynamic Field IDs in Selenium WebDriver using C#

Guide to recreating the Material Ripple effect using Vuejs

Error in Angular form validation: Attempting to access property 'name' of an undefined value

Unable to adjust item inventory in MongoDB, utilizing Node.js and React.js

The asynchronous JavaScript function is successfully printing data, however it is encountering an error where it returns 'undefined'

Utilizing Jquery to enhance table filtering functionality

Capture an image of the video frame every second

Retrieve the element located within a "block" element that is relative to the user's click event, without the

Increasing the name attribute with Jquery cloning

Align the present domain using XPath

Changing CSS properties in React

What caused the auto resize feature of the Automatic Image Montage jQuery plugin to malfunction?

Show the response obtained after making a POST request

Tips for capturing changes in a "count" variable and executing actions based on its value

Ways to expand HTML input fields to fill the whole table cell

Tips for incorporating the feature that enables the inclusion of an article onto a list

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

Updating the title of a bootstrap using jQuery AJAX call