Angularjs выделяет ячейку td динамически в зависимости от значения БД

Question

Как динамически выделять ячейку TD на основе значения в базе данных дня недели и номера смены, используя следующий код.

Может отображать день недели и дату, используя функцию getDates ().после привязки к ячейке TD как $ scope.dates = getDates ();

Например, если приведенная ниже функция getCurrentShiftDtls возвращает weekday = fri и shift = 2, то я хочу выделить (изменить цвет Bg)

<td colspan="3" id="tdFri"> and <td id="tdFri2">B</td>

Как я могу это сделать

code:

function getCurrentShiftDtls(PlId, A_Id) {
  $http({
    method: 'GET',
    url: 'http://xxx/api/Shift/GetShiftDtls',
    params: {
      PlId: PlId,
      A_Id: A_Id
    },
    headers: {
      'Content-Type': 'application/json; charset=utf-8',
      'dataType': 'json'
    }
  }).then(function successCallback(response) {
    var ShiftDtls = response.data;
    shiftDay = ShiftDtls[0].WeekDay; // shiftDay = Fri
    shiftNo = ShiftDtls[0].ShiftNo; // shiftNo = 2
  }, function errorCallback(response) {
    // alert(response);
  });
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <table class="tbWeek">
      <tbody>
        <tr>
          <td colspan="3" id="tdMon">{{dates[0]}}</td> // Mon 3/25
          <td colspan="3" id="tdTue">{{dates[1]}}</td> // Tue 3/26 .. ..
<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay === 'Fri'} ">{{dates[4]}}</td>
          <td colspan="3" id="tdSun">{{dates[6]}}</td> // Sun 3/31
        </tr>
        <tr>
          <td id="tdMon1">A</td>
          <td id="tdMon2">B</td>
          <td id="tdMon3">C</td>
          ... ...
          <td id="tdSun1">A</td>
          <td id="tdSun2">B</td>
          <td id="tdSun3">C</td>
        </tr>
      </tbody>
    </table>

     <style>
    .highlight {
                background: red;
            }

Answer 1

Итак, у вас есть идентификатор tdFri и tdFri2, и вы получаете данные, которые shiftDay = Fri и shiftNo = 2

Мне кажется, что вам просто нужно объединить их и сделатьнекоторые строки для выбора элементов по идентификатору.

var selectors = '#td' + shiftDay + ', #td' + shiftDay + shiftNo;  //'#tdFri, #tdFri2'
var elements = document.querySelectorAll(selectors);
elements.forEach(function(el) {
    el.classList.add('highlighted');
});

.highlighted {
    background: yellow;
}

---

Или, возможно, лучший более "angularJS" способ сделать это - поместить эти значения в угловую область, а затем добавитькласс в шаблоне

<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay ==='Fri'}">
or maybe
<td colspan="3" id="tdFri" ng-class="{'highlight': shiftDay === date[4]}">