Angular js：如何在 html 表中使用“循环内循环”答案

【问题标题】：Angular js: How to use 'loop inside loop' in html tablesAngular js：如何在 html 表中使用“循环内循环”
【发布时间】：2016-11-04 21:16:08
【问题描述】：

我有一个类似的 json 结构

studentList = [
        {
            'name': 'name',
            'isNew': True,
            'class': 'class',
            'subjects': [
                {
                'name': 'subname',
                'mark': 70
                }, {
                'name': 'subname2',
                'mark': 80
                },
            ]
        },
        .....
    ]

我正在尝试将此数据放入 html 表中。下面的代码对我不起作用。

<table>
 .....

<tbody>
    <div ng-repeat="student in student_list">
        <tr ng-class='{in:$first}'> New Student </tr>
        <div ng-if="student.isNew">
            <tr>
                <td> {{student.name}} </td>
                <td> {{student.class}} </td>
                <div ng-repeat="(key, subject) in student.subjects>
                    <td> {{subject.name}} </td>
                    <td> {{subject.mark}} </td>
                </div>
            </tr>
        </div>

        // Old student
        <tr ng-class='{in:$first}' > Old Student </tr>
        ....

    </div>
</tbody>

如果我不使用<div>，我可以循环遍历表格。但是对于上面的表结构，我怎么能用angular来表示数据呢。

【问题讨论】：

你的代码结构不对，不能在div里面写td！！你想要 4 列吗？？

标签： angularjs angularjs-directive html-table

【解决方案1】：

div 元素对于tbody 元素的直接子元素无效。只需将ng-repeat 添加到tr 元素即可。

如果您需要一次重复超过 2 个 tr 元素，您可以使用 ng-repeat-start 指令：

<tr ng-repeat-start="student in student_list">
    <!-- .. -->
</tr>
<tr ng-repeat-end>
    <!-- you still have the student object available here -->
</tr>

【讨论】：

【解决方案2】：

您可以使用内置的角度指令“过滤器”。所以在你的 ng-repeat 你可以拥有。

新生

<tr ng-repeat="student in studentList | filter : isNew">
<td>{{stuffgoeshere}}</td>
</tr>

老同学

<tr ng-repeat="student in studentList | filter !isNew">
<td>{{stuffgoeshere}}</td>
<tr>

希望对你有帮助！

【讨论】：

【解决方案3】：

您的标记存在多个问题，这些问题会弄乱您的输出。你可以做这样的事情。与其他 html 标签不同，table、tr、td、tbody 标签是紧密组合的，您不能将 div 作为子标签放在其中任何一个标签中。

虽然有时它看起来很有效，但这不是你应该做的事情。始终尝试遵循嵌套为 table => tbody => tr => td => any tag。

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {

    $scope.pro = [{
      product: "chicken",
      rating: 3
    }, {
      product: "fish",
      rating: 3
    }, {
      product: "pizza",
      rating: 4
    }];

    $scope.studentsList = [{
      'name': 'StudentName',
      'isNew': true,
      'class': 'class',
      'subjects': [{
        'name': 'subname',
        'mark': 70
      }, {
        'name': 'subname2',
        'mark': 80
      }, ]
    }, {
      'name': 'StudentNameOld',
      'isNew': false,
      'class': 'class',
      'subjects': [{
        'name': 'subname',
        'mark': 70
      }, {
        'name': 'subname2',
        'mark': 80
      }, ]
    }];

  }
]);

td {
  border: 1px solid black;
}
.header > td {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <table>
      <tbody ng-repeat="student in studentsList">
        <tr ng-if="student.isNew" class="header">
          <td colspan="2">New Student</td>
        </tr>
        <tr ng-if="!student.isNew" class="header">
          <td colspan="2">Old Student</td>
        </tr>
        <tr ng-repeat="course in student.subjects">
          <td>{{course.name}}
          </td>
          <td>
            {{course.mark}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

【讨论】：