JavaScript, как изменить глификон в соответствии с изменением значения

Question

Я пытаюсь сделать функцию оптимального уровня, которая, когда значение выше в оптимальном диапазоне, будет отображать стрелку вверх, а когда значение ниже, оно меняется на стрелку вниз.

<div class="card-body" ng-repeat="item in resTemperature" ng-if="$last">
    <p>
        Temperature &emsp;<span class="text" style="font-weight: bold; font-size:150%" ng-repeat="i in item">{{i}} °C </span>                        
        <span class="glyphicon" style="font-size: 200%; float: right;">&#xe013;</span>
    </p>
</div>

Пример результата с жестко заданным значением:

Answer 1

Я бы подошел к этому следующим образом.Добавьте дополнительный класс к вашему div, указав, является ли ваше значение выше / ниже / оптимальным.Затем избавьтесь от своего диапазона глифов, заменив его псевдоэлементом CSS.т.е.

<style>
  .card-body .text::after {
    font-size: 200%;
    float: right;
  }
  .card-body.optimal .text::after {
    content: "O"; /* replacing these with the glyphs you want */
  }
  .card-body.lower .text::after {
    content: "L";
  }
  .card-body.higher .text::after {
    content: "H";
  }
</style>

<div class="card-body optimal" ng-repeat="item in resTemperature" ng-if="$last">
  <p>Temperature &emsp;
    <span class="text" style="font-weight: bold; font-size:150%"  ng-repeat="i in item">{{i}} °C </span>
  </p>
</div>