如何改变DIV

我正在开发中angular.js和HTML一个应用程序的颜色，我被困在一个地方如何改变DIV

有顶部下拉，在下拉菜单的变化我想改变的背景颜色一些像在图像中给出的单元格。

这里是我的代码片段：

HTML页面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 
      }) 

     })

如何更改单元格的背景颜色

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

代码？

请帮助和提前致谢！

来源

2016-04-26 Krunal

你为什么在使用ng-change时使用jquery'.change（）'？ –

使用track by $index在ng-repeat

，然后的细胞像

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

还是风格中使用ng-style

来源

2016-04-26 06:04:43

我是angular.js的新手，你可以写一些'ng-style'的代码，这样我的主意更好 – Krunal

@Krunal https://docs.angularjs.org/api/ng/directive/ngStyle –

但我想将多个div设置为红色... – Krunal

我想你可以通过改变你的内容这种代码（可能是增强的，但你有第一个想法）

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

你只需要敷在良好的细胞背景（可能设置一个布尔？）

来源

2016-04-26 06:10:06 mfrachet

当东西对付这样的我喜欢的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' 
    }); 
}

来源

2016-04-26 06:18:49

您可以使用纳克级

例如适用于角JS动态CSS属性：

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

每当我的价值sbold将是真实的粗体财产将被应用

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

来源

2016-04-26 06:26:54

回答

相关问题