如何在没有 html 元素的情况下使用 ng-repeat

2023-12-27

我需要使用ng-repeat(在 AngularJS 中)列出数组中的所有元素。

复杂之处在于数组的每个元素都将转换为表的一行、两行或三行。

我无法创建有效的 html,如果ng-repeat用于元素,因为之间不允许有任何类型的重复元素<tbody> and <tr>.

例如,如果我使用 ng-repeat<span>,我会得到:

<table>
  <tbody>
    <span>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
    </span>
  </tbody>
</table>          

这是无效的 html。

但我需要生成的是:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>          

其中第一行由第一个数组元素生成,接下来的三行由第二个数组元素生成,第五行和第六行由最后一个数组元素生成。

如何使用 ng-repeat 使其绑定的 html 元素在渲染过程中“消失”?

或者还有其他解决方案吗?


澄清:生成的结构应如下所示。每个数组元素可以生成 1-3 行表格。理想情况下,答案应该支持每个数组元素 0-n 行。

<table>
  <tbody>
    <!-- array element 0 -->
    <tr>
      <td>One row item</td>
    </tr>
    <!-- array element 1 -->
    <tr>
      <td>Three row item</td>
    </tr>
    <tr>
      <td>Some product details</td>
    </tr>
    <tr>
      <td>Customer ratings</td>
    </tr>
    <!-- array element 2 -->
    <tr>
      <td>Two row item</td>
    </tr>
    <tr>
      <td>Full description</td>
    </tr>
  </tbody>
</table>          

从 AngularJS 1.2 开始,有一个指令叫做ng-repeat-start这正是你所要求的。看我的回答在这个问题中 https://stackoverflow.com/questions/12857714/angularjs-ng-repeat-with-no-html-element/18824208#18824208有关如何使用它的说明。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在没有 html 元素的情况下使用 ng-repeat 的相关文章

随机推荐

  • http - 更改请求网址?

    是否可以在不重定向的情况下更改 HTTP 请求的 url 例如代替 要求1 GET user abc123 HTTP 1 1 HTTP 1 1 301 Moved Permanently Location files abc123 要求2
  • ios webkit 中的 touchend 事件未触发?

    我正在尝试为基于 ios webkit 的应用程序实现一个菜单 其中用户触摸 单击并按住菜单按钮 menu item 500 毫秒后子菜单打开 div slide up sub menu 并且用户应该能够将手指 鼠标滑动到子菜单项并释放 l
  • Tapestry 4:资源缓存控制?

    我使用 Tapestry 4 每当我们推送更改任何资产 图像 样式表 JS 库 的版本时 我们都会遇到问题 因为用户的浏览器缓存中仍然有旧版本的资产 我想设置一些简单的方法来允许缓存 但在更新应用程序时强制下载新的资产 简单地完全禁止资产缓
  • 当列表数据发生变化时更新Android ListActivity?

    我想知道如何刷新ListActivity当我更改 添加数据时 我首先想到的是ListAdapter会知道列表何时更改 但是当我向列表添加元素时 列表上没有更新ListActivity 只有当我关闭 ListActivity 并再次重新打开它
  • 本地化 ASP.NET MVC 2 中的错误消息(默认验证属性)

    我正在开发一个多语言网站 我想本地化大多数 ValidationAttribute 的验证错误消息 例如 Requried 我知道可以这样做菲尔 哈克 http haacked com已在此显示article http haacked co
  • 类型提示和@singledispatch:如何以可扩展的方式包含 `Union[...]`?

    我正在重构一个转换各种日期格式的函数 即 ISO 8601 字符串 datetime date datetime datetime等 转换为 Unix 时间戳 我想要使 用新功能 singledispatch而不是类型检查 但我不知道如何保
  • 如何在Python中获取图像的信噪比?

    我正在过滤图像 我想知道信噪比 我尝试使用 scipy 函数 scipy stats signaltonoise 但我得到了一个数字数组 但我真的不知道我得到了什么 还有其他方法可以获得图像的信噪比吗 UPDATE 对于那些不阅读评论中链接
  • Sublime text:向新的语言定义添加符号(语法突出显示)

    我在 sublime text 2 中为一种稍微陌生的语言 Cadence SKILL 编写了语法突出显示 它的工作方式就像一个魅力 但是我怀念 CTRL R 的功能 它以一种易于访问的方式找到当前文件中的所有符号 函数 任何人都可以建议如
  • SQL查询有特定的执行顺序吗?

    我对 SQL 查询的执行顺序感到困惑 例如 Inner join in MySQL在下面的代码中 之间WHERE条款和SELECT FROM子句 哪一个首先被解释和执行 也就是说 下面的查询是否带来 全部tables data首先找到与以下
  • 从上到下滚动列并用上面单元格中的值替换 0

    我必须从上到下滚动一列 实际上是两列 但如果我能得到一列 我就可以管理 并替换0或上面有单元格值的空白 这是我到目前为止所拥有的 它不起作用 Sub ReplaceZeros Application ScreenUpdating False
  • 如何根据 mongodb (mongoose) 中填充的对象对元素进行排序

    我有一个两个模式的钱包和用户 用户架构 var schema new mongoose Schema first name type String wallet id type mongoose Schema Types ObjectId
  • 如何向客户交付 iOS 应用程序 IPA,以使用他们自己的企业配置文件进行签名

    我们开发了一款 iOS 应用程序 已作为 IPA 交付给客户 并具有临时分发配置文件 允许一组员工将其安装在他们的设备上 客户现在希望使用其 iOS 企业开发人员计划凭据将该应用程序在内部分发给所有员工 我原本希望客户可以简单地重新设计带有
  • JavaFX 2:获取 TableCell 行索引

    我有一个带有复选框的表 当我单击第三列或第四列中的复选框时 我想更改第一列中复选框的选择 我希望能够更改同一行上的其他单元格 我已经有了列 所以我想知道单元格位于哪一行 我也非常不确定到目前为止是否正确 到目前为止我所做的大部分是来自 ht
  • 使用 R 从 ftp 服务器下载最新文件

    我有许多名为 FileA2014 03 05 10 24 12 FileB2014 03 06 10 25 12 其中 2014 03 05 10 24 12 部分表示 年 日 月 时 分 秒 这些文件驻留在 ftp 服务器上 我想使用 R
  • XCode 单元测试:读取测试范围包时出错

    我正在接收读取测试范围包时出错 在 XCode 5 中运行单元测试时 没有测试运行 知道如何解决这个问题吗 解决了问题 看来我必须在创建新测试后运行所有测试 在所有测试运行之前 不可能从 GUI 单独运行新的测试
  • MariaDB 显示警告而不是错误

    玛丽亚数据库版本 10 6 4 MariaDB 1 10 6 4 maria focal SQL insert ignore into step is draft created by values 1 2 收到警告 MariaDB kit
  • C++ 插入运算符重载 (<<)

    我正在完成一项分配 其中我必须重载插入运算符以获取 Node 对象 我在类定义之外 node h 文件内创建了运算符重载函数 一切都编译得很好 但是没有调用重载运算符 而是我得到了简单的对象地址 我被禁止修改调用代码 因此任何更改都必须针对
  • Eclipse - 外部 JAR 和 git

    我目前正在使用 eclipse 来处理 Java 另外 我使用 git 在笔记本电脑和台式电脑之间同步我的项目 现在的问题如下 我将外部 JAR 添加到项目中 Slick Util LWJGL 但每个设备上每个库的路径都是不同的 因此 每次
  • 为什么图标没有显示在我的 Ant Design 页面上?

  • 如何在没有 html 元素的情况下使用 ng-repeat

    我需要使用ng repeat 在 AngularJS 中 列出数组中的所有元素 复杂之处在于数组的每个元素都将转换为表的一行 两行或三行 我无法创建有效的 html 如果ng repeat用于元素 因为之间不允许有任何类型的重复元素 tbo