как изменить цвет div

0

Я разрабатываю приложение в angular.js и html, я застрял в одном месте

Существует раскрывающееся меню сверху, при изменении раскрывающегося списка я хочу изменить цвет фона некоторых ячеек, как показано на изображении. Изображение 174551

Вот мой фрагмент кода:

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

         })

Как изменить цвет фона ячейки?

Пожалуйста, помогите и спасибо заранее!

  • 0
    почему вы используете jquery .change() когда вы можете использовать ng-change ?

4 ответа

1

вы можете применять динамические свойства 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-классе

1

использовать track by $index в вашем ng-repeat

а затем внутри стиля ячейки что-то вроде

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

Или используйте ng-style

  • 0
    Я новичок в angular.js, не могли бы вы написать код для ng-style чтобы я получил лучшую идею
  • 0
    @Krunal docs.angularjs.org/api/ng/directive/ngStyle
Показать ещё 1 комментарий
1

Я думаю, вы можете изменить свой контент, используя такой код (возможно, расширенный, но у вас есть первая идея)

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

Вам просто нужно применить фон в хорошей ячейке (возможно, булев?)

1

Когда вы занимаетесь такими вещами, мне нравится добавлять элемент 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'
  });
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню