如何改變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

回答

相關問題