Добавить выпадающий переключатель, только если условие выполнено

Question

Существует список элементов, созданных этим:

<td>
    <span >{{rows.values}} <i class="fas fa-caret-down"></i></span>
</td>

Я хочу, чтобы, если rows.values ​​имел значение больше 0, имел выпадающий переключатель.

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

<td>
    <span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>

<ul ng-class="rows.values ? dropdown-toggle: ''" role="menu">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
</ul>

но это ничего не делает.

ПОСЛЕДНЕЕ РЕДАКТИРОВАНИЕ:

После получения предложений мой код выглядит так:

<td>
    <span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown" dropdown-toggle></i></span>
</td>
<ul ng-class="{'dropdown-toggle': rows.values}" role="toggle">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
 </ul>

но все равно ничего не делает.

Есть предложения?

Answer 1

попробуйте это .. Используйте в качестве выражения

<td>
      <span >{{rows.values}} <i class="fas fa-caret-down dropdown-toggle" data-toggle="dropdown"></i></span>
</td>

 <ul class="dropdown-menu {{rows.values>0?'':'ele-show'}}">
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
</ul>

и задайте собственный стиль как

.ele-show{
  display:none;
}

Answer 2

Вы забыли добавить одинарные кавычки для значений:

<ul ng-class="rows.values ? 'dropdown-menu' : ''" role="menu">
<!--------------------------^-------------^

Или другой способ сделать это:

<ul ng-class="{'dropdown-menu': rows.values}" role="menu">