Angularjs highlight td cell dynamically based on DB value

Question

How to highlight TD cell dynamically based on DB value of weekday and shift number using below code.

Able to display weekday and Date using function getDates(). after binding to TD cell as $scope.dates = getDates();

For example if the below function getCurrentShiftDtls returns weekday = fri and shift no = 2 then I want to highlight(change Bg color) of

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

How can I do this

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

So you have an ID of tdFri and tdFri2, and you get data back that is shiftDay = Fri and shiftNo = 2

It seems to me that you just need to combine these and make some strings to select the elements by ID.

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

---

Or perhaps a better more "angularJS" way to do this would be to put those values onto the angular scope and then add a class in the template

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