angularjs - 有条件地在 ng-repeat 块中添加元素

Question

是否可以根据条件向标记添加内容？就像在这个例子中一样，当我只想td在第一次迭代时添加（仅适用于 的第一个元素myData）？

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   @if myData.indexOf(m) = 0 then // something like that
   <td rowspan ="{{m.length}}">
      <ul>
        <li ng-repeat="d in days">
           {{d.hours}}
        </li>
      </ul>
   </td> 
</tr>

Answer 1

是的，AngularJS 在这种情况下有 2 个指令：

• ng-show / ng-hide系列指令可用于根据评估表达式的结果隐藏（通过使用显示 CSS 规则）DOM 的三个部分。
• 如果我们想有条件地物理删除/添加 DOM 的一部分，那么ng-switch指令系列（ng-switch、ng-switch-when、ng-switch-default）将派上用场。

最终，这两种解决方案都会提供相同的视觉效果，但底层的 DOM 结构会有所不同。对于简单的用例，ng-show / ng-hide 可能没问题，但是应该使用 ng-switch 处理 DOM 的较大部分。

对于这个问题的用例，我建议使用 ng-switch。

Answer 2

最好的解决方案应该是：

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   <td ng-if="$first" rowspan="{{myData.length}}">
       <ul>
           <li ng-repeat="d in days">
               {{d.hours}}
           </li>
       </ul>
   </td> 
</tr>