AngularJS中ng-repeat处理对象数组及子数组的问题排查

嘿，我来帮你搞定这个ng-repeat的问题！你现在的核心问题是没有正确关联父级day对象的messages子数组，导致每个折叠面板都遍历了全部数据，而不是当前day对应的内容。

先直接给你修正后的代码 #

假设你用的是Bootstrap的折叠面板组件，修正后的HTML应该是这样：

<!-- 修正后的折叠面板代码 -->
<div ng-repeat="dayItem in contents track by $index">
  <!-- 折叠面板头部，绑定唯一的折叠目标ID -->
  <div class="panel panel-default">
    <div class="panel-heading" 
         role="button" 
         data-toggle="collapse" 
         data-target="#dayCollapse{{$index}}">
      {{dayItem.day}}
    </div>
    <!-- 折叠内容区 -->
    <div id="dayCollapse{{$index}}" class="panel-collapse collapse">
      <div class="panel-body">
        <!-- 关键：遍历当前dayItem的messages子数组，而不是全局的contents -->
        <div ng-repeat="msg in dayItem.messages track by $index" class="message-item">
          <!-- 这里替换成你实际要展示的message字段，比如msg.content/msg.text等 -->
          {{msg.text}}
        </div>
      </div>
    </div>
  </div>
</div>

为什么原来的代码会出问题？ #

你之前的HTML里，内层ng-repeat应该是遍历当前父级item的messages，但你可能错误地写成了遍历全局的contents.messages（或者没有正确引用父级的item变量）。

举个错误示例对比：

<!-- ❌ 错误的内层ng-repeat：遍历了全局contents，不是当前day的messages -->
<div ng-repeat="msg in contents.messages">...</div>

<!-- ✅ 正确的写法：引用当前父级循环的dayItem的messages -->
<div ng-repeat="msg in dayItem.messages">...</div>

额外的验证和优化点 #

1. 确认数据结构正确性：先在控制器里打印数据，确保$scope.contents的结构是对的：

   // 控制器里加一行，验证数据结构
   socket.on('data', function(data) {
     $scope.contents = data;
     console.log('收到的数据结构:', $scope.contents); // 应该是[{day: 'xxx', messages: [...]}, ...]
   });
   

2. 添加track by提升稳定性：两个ng-repeat都加上track by $index，可以避免AngularJS因为重复数据项抛出的错误，尤其当messages里没有唯一ID的时候。
3. 折叠面板ID唯一性：用$index生成唯一的dayCollapse{{$index}}，确保点击一个面板时只有对应的内容折叠/展开，不会全部联动。

这样调整后，每个Day面板就只会展示自己对应的messages内容啦！

内容的提问来源于stack exchange，提问作者Pradeep