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

【问题标题】：Divs created by ng-repeat do not auto-fit to content width when inside an accordion由 ng-repeat 创建的 Div 在手风琴内时不会自动适应内容宽度
【发布时间】：2016-08-22 06:07:30
【问题描述】：

我正在尝试使用 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 部分有一个很大的空白区域，其中不存在第二个事件。

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

【问题讨论】：

标签： jquery angularjs angularjs-ng-repeat accordion

【解决方案1】：

试试这个

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

这将解决您的问题。

【讨论】：