如何改变div的颜色

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

我正在开发angular.js和html的应用程序，我被困在一个地方

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

顶部有一个下拉列表，在下拉列表更改时，我想更改某些单元格的背景颜色，如图片中所示。

Here is my code snippet:

这是我的代码片段：

HTML page

HTML页面

<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

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

请提前帮助和感谢!!

4 个解决方案

#1

use track by $index in your ng-repeat

在ng-repeat中使用$ index跟踪

and then inside the style of the cell something like

然后在单元格的样式里面

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

颜色：$ index === 1？ 'red'：'green'

Or use ng-style

或者使用ng-style

#2

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

你只需要在好单元格上应用背景（可能设置一个布尔值？）

#3

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.

当处理这样的东西时，我喜欢在重复的东西中添加一个id元素，然后在onclick中传递元素就像你一样，然后你可以使用jQuery或任何你喜欢的东西来改变它。

<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'
  });
}

#4

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

您可以使用ng-class在角度js中应用动态CSS属性

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

只要isbold的值为true，就会应用粗体属性

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

附：您可以在ng-class中应用多个属性

#1