Question

我有像

这样的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来表示数据。

Answer 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>

Answer 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>

希望它有所帮助！

Answer 3

标记存在多个问题，导致输出混乱。你可以这样做。与其他html标签不同，table，tr，td，tbody标签紧密分组，你不能在任何一个内部将div作为子标签。

虽然它有时似乎有用，但它不是你应该做的事情。始终尝试按照table =＆gt;进行嵌套。 tbody =＆gt; tr =＆gt; td =＆gt;任何标签。

＆＃13;

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
      }, ]
    }];

  }
]);

＆＃13;

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

＆＃13;

<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>

＆＃13;

Angular js：如何使用＆＃39;循环内部循环＆＃39;在html表中

3 个答案: