当前位置: 首页 > 面试题库 >

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

诸葛奇玮
2023-03-14
问题内容

是否可以根据条件向标签添加内容?像在此示例中一样,当我只想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>

问题答案:

是的,在这种情况下,AngularJS具有两个指令:

  • 可以使用ng-show / ng-hide指令族基于评估表达式的结果来隐藏(通过使用显示CSS规则)DOM 3的一部分。
  • 如果我们想有条件地物理删除/添加DOM的一部分,那么ng-switch指令家族(ng-switch,ng-switch-when,ng-switch-default)会派上用场。

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

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



 类似资料:
  • 问题内容: 我有一张表的ng- repeat,我希望能够在单击时添加一个类,而在未单击时删除该类。可以同时选择多个。目前,所有城市都在或不在接受该课程的申请。 例如:(假设节点有100个项目) 在我的JS中 问题答案: 现在,您要更改的作用域上只有一个属性,所有内容都引用该属性。尝试放到节点上… 而在…

  • 问题内容: 使用AngularJS,我需要使用选择器将HTML附加到ng-repeat元素:’objectMapParent-‘+ post._id 所以我创建了一个循环以遍历posts数组的元素的循环,对于每个元素,我在其中调用函数:createElement 该回调函数获得一个选择器elementParent,该选择器用于在DOM中查找节点,然后附加所需的HTML 但是有些事情行不通,就我而言

  • 问题内容: 我正在尝试使用条件将项目分组为ng-repeat。 一个示例条件是将所有元素分组为同一小时。 数据: “时间”字段实际上是一个时间戳记(1399372207),但是使用准确的时间,示例输出将更易于理解。 我正在使用ng-repeat列出这些项目: 还尝试了: 有效输出为: 如果没有针对我的问题的简单解决方案,我的最后选择是将数据分组,然后将其分配给ng-repeat中使用的作用域变量。

  • 问题内容: 我正在尝试在ng-repeat中动态添加不同的指令,但是输出没有被解释为指令。 我在这里添加了一个简单的示例:http : //plnkr.co/edit/6pREpoqvmcnJJWzhZZKq 控制器: 指示: HTML: 如何通过ng-repeat 使角度拾取在中指定的指令? 问题答案: 我知道这是一个老问题,但是google将我带到了这里,但我不喜欢这里的答案。所以我创建了这个

  • 本文向大家介绍aurelia 有条件地添加或删除HTML元素,包括了aurelia 有条件地添加或删除HTML元素的使用技巧和注意事项,需要的朋友参考一下 示例 与show.bind使用时不同,if.bind如果提供的绑定值是,则元素将从页面中删除;如果值为,则将元素false添加到页面中true。 分组元素 有时可能需要一次性添加或删除整组元素。为此,我们可以使用<template>元素来显示或

  • 问题内容: 我正在使用angular.js和(出于参数考虑)引导程序。现在我需要遍历“事物”并将其显示在“行”中: 现在,我该如何用角度关闭每隔三点的div?我从angular-ui尝试过ui-if,但即使这样也没有成功。 如果要使用服务器端渲染,则可以执行以下操作(此处为JSP语法,但没有关系): 请注意,我实际上需要在这里更改DOM,而不仅仅是css隐藏元素。我尝试在和div 上重复,但无济于