Как изменить цвет фона ячейки таблицы на основе значения ячейки при использовании директивы в Angularjs

Question

У меня есть таблица, в которой отображаются данные о распределении медицинской страховки бенефициару. Мне нужно добавить условие, которое проверяет значения, чье использование элементом составляет более 70% первоначального выделения, и в таком случае ячейка, отображающая фон этого значения, изменяется при наведении курсора мыши.

Пока что мне удалось только извлечь все данные из моей серверной службы и отобразить их на столе.

Моя реализация кода выглядит следующим образом:

<div class="panel-body">
  <div class="form-group col-sm-12" style="max-height: 400px; overflow-y: auto;">
    <table class="table table-bordered table-striped table-responsive input-sm">
      <thead>
        <tr>
          <th>
            <div class="th"><b>HEALTH BASKET</b></div>
          </th>
          <th >
            <div class="th"><b>ALLOCATION</b></div>
          </th>
          <th >
            <div class="th"><b>USAGE</b></div>
          </th>
          <th >
            <div class="th"><b>BALANCE</b></div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-ng-repeat="voucher in vouchers">
          <td>{{voucher.voucherName}}</td>
          <td>{{voucher.value}}</td>
          <td >{{voucher.used}}</td>
          <td>{{voucher.amountRemaining}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Есть идеи, как это можно реализовать с помощью директив Angular?

Answer 1

Вам необходимо использовать директивы ng-mouseover, ng-mouseleave и ng-class

В вашем <tbody>:

<tbody>
    <tr data-ng-repeat="voucher in vouchers" ng-class="{'usage-exceeded': usageExceeded}" ng-mouseover="checkUsage(voucher)" ng-mouseleave="usageExceeded = false">
        <td>{{voucher.voucherName}}</td>
        <td>{{voucher.value}}</td>
        <td >{{voucher.used}}</td>
        <td>{{voucher.amountRemaining}}</td>
    </tr>
</tbody>

А внутри функции контроллера:

$scope.checkUsage = function (voucher) {
    // add the logic to set the $scope.usageExceeded as true, change this logic as per
    // your condition
    if ((voucher.used / voucher.value) * 100 > 70) {
        $scope.usageExceeded = true;
    }
};

Теперь добавьте класс css usage-exceeded внутри вашего css, который изменит цвет фона.

.usage-exceeded {
    background-color: red;
}