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

您忘记为值添加单引号：

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

或者另一种方法是：

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

Answer 2

试试这个..用作表达式

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

仅当条件已满足时才添加下拉切换

2 个答案: