Question

我正在尝试使用angularJS打印出一些数据。以下是该脚本的相关部分：

$scope.incidentCats = [{
  name: "FIRE",
  incidents: [{
    location: "location 1",
    dateTime: "datetime 1",
    currStatus: "currStatus 1"
  },
  {
    location: "location 2",
    dateTime: "datetime 2",
    currStatus: "currStatus 2"
  }]
},
{
  name: "CODE BLUE",
  incidents: [{
    location: "location 3",
    dateTime: "datetime 3",
    currStatus: "currStatus 3"
  }]
}];

正如您在数据中看到的，事件类型FIRE包含两个事件的记录，而事件类型CODE BLUE只有一个。

以下是EJS文件中的相关代码：

<div ng-repeat="category in incidentCats" class="incident">
  <header class="category">
    <strong>{{ category.name }}</strong>
  </header>
  <section>
    <div ng-repeat="incident in category.incidents">
      {{ incident.location }}<br>
      {{ incident.dateTime }}<br>
      {{ incident.currStatus }}<br>
    </div>
  </section>
</div>

最后，这是HTML的特定部分的CSS（不包括用于整个项目的任何常用CSS）：

.incident {
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  position: relative;
  padding: 5px;
  margin: 25px 0;
}

.incident section {
  margin-top: 10px;
}

.incident section > div {
  margin: 5px auto;
}

到目前为止，代码按预期工作，除了一件事：当在事件循环中创建div元素时，我期望为{{1}创建两个div }类别，FIRE类别只有一个div。但是，代码为这两个类别创建了两个CODE BLUE。

这不是我想要的。由于div中的第二个div包含CODE BLUE个标签但没有数据，因为此类别的记录中没有第二个事件，现在有一个空白区域第二个<br>是第一个div下的位置，这很好，因为第一个事件确实存在并正确打印出来。我怎么能纠正这个？

Answer 1

尝试使用ng-repeat-start和ng-repeat-end

从Angular 1.2版开始，ng-repeat获得了两个名为ng-repeat-start和ng-repeat-end的兄弟指令。有了这些，我们可以明确指定ng-repeat的开头和结尾。因此，我们可以在任何两个DOM元素上指定ng-repeat和ng-repeat-start，而不是在一个DOM元素上使用ng-repeat-end指令。

<div class="incident">
  <header ng-repeat-start="category in incidentCats" class="category">
    <strong>{{ category.name}}</strong>
  </header>
  <section ng-repeat-end>
    <div ng-repeat="incident in category.incidents">
      {{ incident.location }}<br>
      {{ incident.dateTime }}<br>
      {{ incident.currStatus }}<br>
    </div>
  </section>
</div>

Answer 2

我试图复制行为，我可以看到一切运作良好。 ng-repeat正在生成HTML结构。这可能与您发布的数据有关。如果发布的数据正确，那么HTML应该按预期工作。您可以尝试共享您的确切代码以调试问题。我使用了以下数组来重现相同的内容：

    $scope.incidentCats = [{
  name: "FIRE",
  incidents: [{
    location: "location 1",
    dateTime: "datetime 1",
    currStatus: "currStatus 1"
  },
  {
    location: "location 2",
    dateTime: "datetime 2",
    currStatus: "currStatus 2"
  }]
},
{
  name: "CODE BLUE",
  incidents: [{
    location: "location 3",
    dateTime: "datetime 3",
    currStatus: "currStatus 3"
  }]
}];

Plnkr Link

由ng-repeat创建的额外div

2 个答案: