Условный стиль отображения

Question

У меня есть список предметов, имеющих эту структуру:

items = [ {name:"name1",value:"value1",status:"new"},
          {name:"name2",value:[new_val, prev_val],status:"changed"},
          {name:"name3",value:"value3",status:"deleted"},...]

Статус может быть: «новый», «изменен» или «удален». Что мне нужно сделать, это повторить список элементов и отобразить их следующим образом:

• Если status === "new": отобразить имя в «зеленом»
• Если status === "deleted": отобразить имя «красным» и вычеркнуть
• Если status === "changed": отобразить имя желтым, первое значение красным и пробитым, вторым зеленым (как новое значение)

Мой код выглядит так:

<tr ng-repeat="item in items">
  <td ng-class="{'deleted-entry': item.status === 'deleted', 
                 'changed-entry': item.status === 'changed', 
                 'new-entry': item.status === 'new'}">
    {{item.name}}
  </td>
  <td ng-if="another condition">
    <i ng-if="item.status !== 'changed'">
      {{item.value}}
    </i>
    <!-- <i ng-if="item.status === 'changed'" ng-class="changed-entry">{{item.value[0]}}{{item.value[1]}}</i> -->
  </td>
</tr>

Я не знаю, как отображать значения рядом друг с другом, каждый со своим стилем класса в случае status==="changed".
Вот мои классы CSS:

.deleted-entry {
   text-decoration: line-through;
   color: red;
}
.changed-entry {
  color: yellow;
}
.new-entry {
  color: green;
}