Question

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

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

这是我的代码段：

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>

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

         })

如何更改细胞的背景颜色？

请提前帮助并致谢!!

Answer 1

在document.getElementsByTagName("h1")[0].innerHTML

中使用track by $index

然后在单元格的样式内部

ng-repeat

或使用ng-style

Answer 2

我认为您可以使用此类代码更改您的内容（可能会增强，但您有第一个想法）

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

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

Answer 3

当处理这样的东西时，我喜欢在重复的东西中添加一个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>

然后在你的控制器中

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

Answer 4

您可以使用ng-class

在角度js中应用动态CSS属性

示例：

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

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

P.S。您可以在ng-class
中应用多个属性

如何改变div的颜色

4 个答案: