使用 <tr> <td> 嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat with <tr> <td>使用 <tr> <td> 嵌套 ng-repeat
【发布时间】：2015-03-20 07:03:45
【问题描述】：

我有这样的 JSON 数据：

{
  "results": [
    {
      "Header": "header1",
      "Sections": [
        {
          "Name": "sec1"
        },
        {
          "Name": "sec2"
        },
        {
          "Name": "sec3"
        }
      ]
    },
    {
      "Header": "header2",
      "Sections": [
        {
          "Name": "sec4"
        }
      ]
    },
    {
      "Header": "header3",
      "Sections": [
        {
          "Name": "sec5"
        }
      ]
    }
  ]
}

我想以这样的表格布局显示数据：

    header1   | header2  |  header3
---------------------------------------
sec1|sec2|sec3|  sec4    |   sec5

我无法使用以下代码执行此操作：

<table>
  <tbody>
    <tr>
      <td ng-repeat="header in results" colspan="{{header.Sections.length}}">
       {{header.Header}}
      </td>
    </tr>
    <tr>
      <div ng-repeat="header in results">
        <td ng-repeat="section in header.Sections">
          {{section.Name}}
        </td>
      </div>
    </tr>
  </tbody>
</table>

我尝试在<div> 上使用 ng-repeat-start，但仍然无法正常工作。任何帮助表示赞赏。

编辑

当前代码的输出是：

header1    |  header2   |  header3

【问题讨论】：

你能展示一下你的输出吗？

标签： javascript html angularjs angularjs-ng-repeat ng-repeat

【解决方案1】：

angular.module("myApp", [])
  .controller("myController", function($scope) {
    $scope.results = [{
      "Header": "header1",
      "Sections": [{
        "Name": "sec1"
      }, {
        "Name": "sec2"
      }, {
        "Name": "sec3"
      }]
    }, {
      "Header": "header2",
      "Sections": [{
        "Name": "sec4"
      }]
    }, {
      "Header": "header3",
      "Sections": [{
        "Name": "sec5"
      }]
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myController">
  <tbody>
    <tr>
      <td ng-repeat="header in results" colspan="{{header.Sections.length}}">
        {{header.Header}}
      </td>
    </tr>
    <tr>
      <td ng-repeat="header in results">
        <table><tr><td ng-repeat="section in header.Sections">
          {{section.Name}}
        </td></tr></table>
      </td>
    </tr>
  </tbody>
</table>

每个标题都应该是一列，并且每一列都应该有一个 1 行的节表作为列。查看 sn-p 并告诉我这是不是你想要的

【讨论】：

我运行了你的代码，但所有 5 个部分都显示在 header1 下
检查生成的表格，你会发现它的结构是正确的，只是样式问题..

【解决方案2】：

关键是按照您在控制器中的布局方式转换数据。在下面的 sn-p 中，我添加了一个新函数 allSections，它将检索所有部分的平面列表，以便 ng-repeat 指令可以循环整个列表。我还添加了一个addSection 按钮来证明当节数发生变化时它会正确更新。向@AhmedEid 致敬，首先将代码复制到 sn-p 中。

angular.module("myApp", [])
  .controller("myController", function($scope) {
    $scope.results = [{
      "Header": "header1",
      "Sections": [{
        "Name": "sec1"
      }, {
        "Name": "sec2"
      }, {
        "Name": "sec3"
      }]
    }, {
      "Header": "header2",
      "Sections": [{
        "Name": "sec4"
      }]
    }, {
      "Header": "header3",
      "Sections": [{
        "Name": "sec5"
      }]
    }];
  
    $scope.allSections = function() {
      var sections = [];
      for (var i = 0; i < $scope.results.length; i++) {
        var column = $scope.results[i];
        for (var j = 0; j < column.Sections.length; j++) {
          sections.push(column.Sections[j]);
        }
      }
      
      return sections;
    }
    
    $scope.addSection = function(header) {
      header.Sections.push({Name: "sec" + (header.Sections.length + 1)});
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="myApp" ng-controller="myController">
  <tbody>
    <tr>
      <td ng-repeat="header in results" colspan="{{header.Sections.length}}">
        {{header.Header}}
      </td>
    </tr>
    <tr>
        <td ng-repeat="section in allSections()">
          {{section.Name}}
      </td>
    </tr>
    <tr>
      <td ng-repeat="header in results" colspan="{{header.Sections.length}}">
        <button ng-click="addSection(header)">Add</button>
      </td>
  </tbody>
</table>

【讨论】：