由 ng-repeat 创建的 div 在手风琴内部时不会自动适应内容宽度

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"
  }]
}];

$(document).ready(function() {
  $("#accordion").accordion({
    header: ".category",
    collapsible: true,
    active: false
  });
});

从数据中可以看出，事件类型FIRE有两起事件的记录，而事件类型CODE BLUE只有一个。

EJS 文件中的相关代码如下：

<div id="accordion" class="container">
  <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>
</div>

最后，这是 HTML 的这个特定部分的 CSS（不包括我无法控制的用于整个项目的任何通用 CSS）：

.container {
  position: relative;
  width: calc(100% - 50px);
  height: auto;
  margin: 0 25px;
}

.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;
}

FIRE 的 section 元素的高度，其中两个事件有两个内部 div 元素，CODE BLUE 的高度一次事件只有一个div，是一样的。因此，虽然 FIRE 事件在网页上填写了它的部分，但 CODE BLUE 部分有一个大的空白 space 本来不存在的第二个事件。

这不是我想要的，这是为了让每个事件类别的高度适合其各自的内容。我已经测试了我的代码，并观察到当手风琴代码被删除时，这些部分确实适合它们的内容。因此，很可能是手风琴导致了这个问题。是否可以纠正这个问题，这样我就可以实现手风琴，同时让每个部分都适合其内容的高度，如何解决？

Answer 1

试试这个

$(document).ready(function() {
  $("#accordion").accordion({
    header: ".category",
    collapsible: true,
    active: false,
    heightStyle : "content"
  });
});

这将解决您的问题。

由 ng-repeat 创建的 div 在手风琴内部时不会自动适应内容宽度

Divs created by ng-repeat do not auto-fit to content width when inside an accordion

jquery

accordion

angularjs

angularjs-ng-repeat