多个嵌套的 ng-repeat-start 无法显示数据

Question

多个嵌套的 ng-repeat-start 无法显示数据

Abd*_*yed 2 javascript angularjs angularjs-ng-repeat

我正在尝试展平嵌套的 json 对象并将其显示在表格中。

所以我尝试在一个 div 中使用多个 ng-repeat-start 和 ng-repeat-end 元素。但不知何故，数据没有得到显示。

Plunkr : http://plnkr.co/edit/apuf9YUYnkoSaCDaNYrC?p=preview

HTML :

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    Data is  : 
    {{mydata}}

    <table cellspacing="1" border="1">
      <thead>
        <tr> 
        <td> MainTitle</td>
        <td> SubTitle</td>
        <td> LastTitle</td>
        <td> Final</td>
        </tr>

      </thead>
      <tbody>
      <div ng-repeat-start="main in mydata" ng-if="false"></div>    
      <div ng-repeat-start="sub in main.items" ng-if="false"></div>    
      <div ng-repeat-start="last in sub.l2items" ng-if="false"></div>


      <tr ng-repeat="final in last.l3items">
        <td> {{main.title}} </td>
        <td> {{sub.title}} </td>
        <td> {{last.title}} </td>
        <td> {{final}} </td>

      </tr>
      </tbody>
      <div ng-repeat-end ng-if="false"></div>    
      <div ng-repeat-end ng-if="false"></div>    
      <div ng-repeat-end ng-if="false"></div>

    </table>
  </body>

</html>

Run Code Online (Sandbox Code Playgroud)

代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';



    $scope.mydata = [
      {
        title :"hello",
        items : [
          {
          title: "level 1 title",
          l2items : [
            {
            title : "level 2 title",
            l3items: [ "a","b" ]

           }
            ]
        }
        ,
         {
          title: "level 1 title 1 ",
          l2items : [
            {
            title : "level 2 title 1",
            l3items: [ "a 1","b 1" ]
           }
            ]
        }
      ]
      },{
      title :"hello 0",
        items : [
          {
          title: "level 1 title 0",
          l2items : [
            {
            title : "level 2 title 0",
            l3items: [ "a 0","b 0" ]

           }
            ]
        }
        ,
         {
          title: "level 1 title 1 0",
          l2items : [
            {
            title : "level 2 title 1 0",
            l3items: [ "a 1 0","b 1 0" ]
           }
            ]
        }
      ],
      }]
});

Run Code Online (Sandbox Code Playgroud)

预期输出：（抱歉无法创建正确的表）

主标题 | 字幕 | 最后标题 | 最终的

你好 |一级标题 |二级标题 |a

你好 |1 级标题 |2 级标题 |b

你好 |level 1 title 1 |level 2 title 1 |a 1

你好 |级别 1 标题 1 |级别 2 标题 1 |b 1

你好 0 |级别 1 标题 0 |级别 2 标题 0 |a 0

你好 0 |级别 1 标题 0 |级别 2 标题 0 |b 0

你好 0 |级别 1 标题 1 0 |级别 2 标题 1 0 |a 1 0

你好 0 |级别 1 标题 1 0 |级别 2 标题 1 0 b 1 0

Answer 1

Zac*_*ach 5

我相信问题出在您的 HTML 上。最有可能在你的桌子里面有 div。如果您将其转换为<div>s，则它可以工作。我看到的另一个问题是你在重复你的结束</body>标签。

我明白你为什么用<div>s 和ng-ifs做这件事。曾经有过的注释指令版本ng-repeat，或者至少努力创建一个，但我认为它们遇到了浏览器限制。

这是一个类似的问题。也许你会喜欢他们的解决方案。

否则，用<div>s替换你的<tr>s：

  <tr ng-repeat-start="main in mydata" ng-if="false"></tr>
  <tr ng-repeat-start="sub in main.items" ng-if="false"></tr>
  <tr ng-repeat-start="last in sub.l2items" ng-if="false"></tr>

  <tr ng-repeat="final in last.l3items">
    <td> {{main.title}} </td>
    <td> {{sub.title}} </td>
    <td> {{last.title}} </td>
    <td> {{final}} </td>

  </tr>

  <tr ng-repeat-end ng-if="false"></tr>
  <tr ng-repeat-end ng-if="false"></tr>
  <tr ng-repeat-end ng-if="false"></tr>

Run Code Online (Sandbox Code Playgroud)

http://plnkr.co/edit/jPtHDbaonUtc9tXQadc2?p=preview

归档时间：	9 年，8 月前
查看次数：	1316 次
最近记录：	9 年，8 月前