有条件加入在NG-重复块元素 [英] Conditionally adding elements in ng-repeat block

问题描述

是否有可能的东西添加到基于状态的标记？
就像这个例子，当我想补充 D 仅在第一次迭代（仅适用于 myData的的第一个元素）？

 ＆LT; TR NG重复=米myData的＆GT;
   ＆所述; TD＆GT; {{m.Name}}＆下; / TD＆GT;
   ＆所述; TD＆GT; {{m.LastName}}＆下; / TD＆GT;   @if myData.indexOf（M）= 0，那么//类似的东西
   ＆LT; TD ROWSPAN ={{m.length}}＆GT;
      ＆LT; UL＆GT;
        ＆LT;李NG重复=d在天＆GT;
           {{d.hours}}
        ＆LT; /李＆GT;
      ＆LT; / UL＆GT;
   ＆LT; / TD＆GT;
＆LT; / TR＆GT;
 

解决方案

是的，AngularJS有2个用于指示这个场合：

• 秀 /的ng-hide 家族可用于隐藏（用
  使用基于的结果显示CSS规则）DOM的三个部分
  评估一个前pression。


• 如果我们想物理删除/添加DOM部分有条件
  家庭 NG-开关指令（NG-开关，NG-开关时，
  NG-开关默认）会来得心应手。

在一天结束时这两种解决方案将给予同样的视觉效果，但底层DOM结构会有所不同。对于简单的用例NG-显示/ NG隐藏可能是好的，但较大的DOM的部分应与NG-开关进行治疗。

有关此问题的使用案例我会建议使用纳克开关。

Is it possible to add stuff to the markup based on condition? Like in this example, when I want to add td only on the first iteration (only for the first element of 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>

解决方案

Yes, AngularJS has 2 directives for this occasion:

• The ng-show / ng-hide family of directives can be used to hide (by using display CSS rules) parts of the DOM three based on a result of evaluating an expression.
• If we want to physically remove / add parts of the DOM conditionally the family of ng-switch directives (ng-switch, ng-switch-when, ng-switch-default) will come handy.

At the end of the day both solutions will give the same visual effect but the underlying DOM structure will be different. For simple use cases ng-show / ng-hide is probably OK, but larger portions of the DOM should be treated with ng-switch.

For the use case from this question I would advice using ng-switch.

这篇关于有条件加入在NG-重复块元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！