CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Krunal
Krunal

Reputation: 6490

how to Change color of div

I am developing a app in angular.js and html, i got stuck at one place

There is a dropdown on the top, on change of dropdown i want to change background color of some cells like given in image. enter image description here

Here is my code snippet:

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] == dateindex && selectedCell[1] == timeindex}"></div>
    </div>

code for controller.js

Here is the click event of dropdown change:

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

            //Here i want to change color of cell located in 1st row and 1st column
           //also i want to change color of cell located in 2nd row and 2nd column
           })

         })

How do i change background color of cell?

Please help and thanks in advance !!

Upvotes: 0

Views: 249

Answers (4)

Kashif ali
Kashif ali

Reputation: 149

you can apply dynamic CSS properties in angular js using ng-class

example:

<p ng-class="bold:isbold"> Applying properties Dynamically </p>
<input type="checkbox" ng-model="isbold">make text bold

whenever value of isbold will be true bold property will be applied

P.S. You can apply multiple properties in ng-class

Upvotes: 1

sterling baldwin
sterling baldwin

Reputation: 181

When dealing with stuff like this I like to add an id element to the thing being repeated, and then in the onclick pass the element just like you are, where then you can change it using jQuery or whatever you like.

<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>

And then in your controller

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

Upvotes: 1

mfrachet
mfrachet

Reputation: 8922

I think you can change your content by using this kind of code (maybe enhanced, but you have a first idea)

<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>

You just have to apply the background on the good cell (set a boolean maybe ?)

Upvotes: 1

Avraam Mavridis
Avraam Mavridis

Reputation: 8920

use track by $index in your ng-repeat

and then inside the style of the cell something like

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

Or use ng-style

Upvotes: 1

Related Questions