Я разрабатываю приложение в 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
})
})
Как изменить цвет фона ячейки?
Пожалуйста, помогите и спасибо заранее!
вы можете применять динамические свойства CSS в угловых js, используя ng-class
пример:
<p ng-class="bold:isbold"> Applying properties Dynamically </p>
<input type="checkbox" ng-model="isbold">make text bold
когда значение isbold будет истинным, будет применено жирное свойство
PS Вы можете применить несколько свойств в ng-классе
использовать track by $index
в вашем ng-repeat
а затем внутри стиля ячейки что-то вроде
color: $index === 1? 'red': 'green'
Или используйте ng-style
ng-style
чтобы я получил лучшую идею
Я думаю, вы можете изменить свой контент, используя такой код (возможно, расширенный, но у вас есть первая идея)
<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>
Вам просто нужно применить фон в хорошей ячейке (возможно, булев?)
Когда вы занимаетесь такими вещами, мне нравится добавлять элемент 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'
});
}
.change()
когда вы можете использоватьng-change
?