修改

Question

所以我想要实现的是：

循环播放消息（ng-repeat）
按日期排序消息
然后将当前消息与前一个消息分组，如果作者匹配（存储在相同的div元素中）
如果当前消息的作者与之前的消息不匹配，则创建新div
继续循环

我被困在这里：

<div class="message" ng-repeat="msg in chatDetails.msgList">
  <p>{{ msg.text }}</p>
</div>

我需要保持确切的顺序 - 简单地说，如果以前的元素与当前元素不匹配 - 应该创建新的框。

这甚至可能是有角度的吗？如果是的话，你能告诉我怎么样吗？

谢谢！

修改

下面是chatDetails的示例结果：

  {
    msgList: [
      { author: 0, text: 'hi', date: 1493050181799 },
      { author: 1, text: 'hola!', date: 1493050181801 },
      { author: 1, text: 'wilkomen', date: 1493050181802 },
      { author: 0, text: 'czesc', date: 1493050181803 }
      { author: 0, text: 'ciao', date: 1493050181804 }
      { author: 1, text: 'bonjour', date: 1493050181805 }
    ]
  }

某种想要的结果：

<div class="message-list">
  <div class="message-group" data-author="1">
    <div class="message">
      <p>hola</p>
    </div>
    <div class="message">
      <p>ciao</p>
    </div>
  </div>
  <div class="message-group" data-author="0">
    <div class="message">
      <p>hola</p>
    </div>
  </div>
  <div class="message-group" data-author="1">
    <div class="message">
      <p>hola</p>
    </div>
    <div class="message">
      <p>hola</p>
    </div>
  </div>
</div>

Answer 1

我相信您的问题可以通过“orderBy”来解决。

https://docs.angularjs.org/api/ng/filter/orderBy

看起来像是：

<div class="message" ng-repeat="msg in chatDetails.msgList | orderBy: 'date'">
    <p>{{ msg.text }}</p>
</div>

如果您的msg对象具有某个日期或索引值，则可以按该数字排序。

Angular 1.6 - ng-repeat orderby和groupby项

修改

1 个答案: