angularjs：带有内部 ng-repeat 的 ng-repeat-start 和 ng-repeat-end答案

【问题标题】：angularjs: ng-repeat-start and ng-repeat-end with inner ng-repeatangularjs：带有内部 ng-repeat 的 ng-repeat-start 和 ng-repeat-end
【发布时间】：2013-08-11 22:37:10
【问题描述】：

您好，我有一个用于 ng-repeat-start 和 end 的简单用例，并且工作正常，当我想添加内部 ng-repeat 时出现问题。这是我的代码

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{e}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

td 元素的内部 ng-repeat 不起作用，我在检查 html 源代码时看到 ngRepeat 注释，但未创建 td 元素。

<!-- ngRepeat: e in obj.row -->

我丑陋的解决方法（鉴于我知道该向量的大小）是：

<tr ng-repeat-start="obj in rows" >
  <td>{{obj.row[0]}}</td>
  <td>{{obj.row[1]}}</td>
  <td>{{obj.row[2]}}</td>
  <td>{{obj.row[3]}}</td>
</tr>
<tr ng-repeat-end>
  <td colspan="4">{{obj.description}}</td>
<tr>

【问题讨论】：

是不是因为模板是无效的HTML？我看到结尾</tr> 标签实际上是<tr>

标签： angularjs angularjs-ng-repeat

【解决方案1】：

我不确定您是否使用 angular 1.1.6，因为 ng-repeat-start 和 ng-repeat-end 在 1.1.5 或 1.0.7 中尚不可用。

但是，您实际上不必使用新指令来实现这一点。您现在可以像这样简单地实现它：

<table>
    <tbody ng-repeat="obj in rows">
        <tr ng-repeat="e in obj.row">
            <td>{{e}}</td>
        </tr>
        <tr>
            <td colspan="4">{{obj.description}}</td>
        <tr>
    </tbody>
</table>

当AngularJS 1.1.6版本正式发布时，您可以使用ng-repeat-start和ng-repeat-end重新实现。

Demo

【讨论】：

是的，我使用的是 1.1.6 版。我喜欢您的解决方案，我之前尝试过它并且它有效。我不喜欢的是多个 tbody 元素，因此我尝试了这个新功能。感谢您的回答！
@Jime 你只需要一个tbody。
@EliranMalka 谢谢。只是想让它更专业，更易于阅读:)
@sza 由 ng-repeat 在 tbody 级别生成的 html 代码将创建几个 tbody 元素。这是您的示例生成的代码（非常好且有用）
多个 tbody 似乎是有效的，根据这个：stackoverflow.com/questions/3076708/…

【解决方案2】：

我认为您的数据结构可能有问题。使用 Angular 1.2.1 这对我有用

<div ng-app="myApp" ng-controller="myCtrl">
    <div class="h" ng-repeat-start="val in data">{{val.title}}</div>
    <div ng-repeat="con in val.content">
        {{con}}
    </div>
    <div class="b" ng-repeat-end>footer</div>
</div>

见jsFiddle

【讨论】：

【解决方案3】：

您应该能够使用基于索引的迭代来绕过它：

<tr ng-repeat-start="obj in rows" >
  <td ng-repeat="e in obj.row">{{obj.row[$index]}}</td>
</tr>
<tr ng-repeat-end>
<!-- ... -->

【讨论】：

问题是 ng-repeat 指令没有被解析，我使用基于索引的迭代或 e 对象