如果他们的id匹配（ANGULAR JS），如何将div附加到前一个div

Question

这就是我的布局在 html 中的样子

<div ng-repeat="message in messages">
    <div ng-class="{'messages messages--sent': userId == message.id,         
        'messages messages--received': userId != message.id}">
            <div class="message">
                {{message.content}}
            </div>
    </div>
</div>

这是我的消息数组的结构

    $scope.messages = [
    {
        "id":"Michael",
        "content":"Hey"
    },
    {
        "id":"Rich",
        "content":"Yow"
    },
    {
        "id":"Rich",
        "content":"How are you"
    },
    {
        "id":"Michael",
        "content":"Im okay"
    },
    {
        "id":"Michael",
        "content":"Im missed you!"
    },
    ];

This is the layout I'm trying to achieve

之前的布局遵循这个 css 代码样式

.messages--received .message:first-child {
  border-top-left-radius: 50px;
}

.messages--received .message:last-child {
    border-bottom-left-radius: 50px;
    margin-bottom: 10px;
}

.messages--received .message:last-child::after {
    content: " ";
    display: block;
    background: url(profile.png) center center no-repeat;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: absolute;
    bottom: 0;
    left: -35px;
    bottom: 0px;
}

.messages--sent .message {
    float: right;
    max-width: 80%;
    background-color: #1998e6;
    color: #fff;
    font-size: 12px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
}

.messages--sent .message:first-child {
    border-top-right-radius: 50px;
}

.messages--sent .message:last-child {
    border-bottom-right-radius: 50px;
    margin-bottom: 10px;
}

But this is what happens

我的问题是它在 ng-repeat 期间的每个循环都会创建一个新的 div，我不希望这样。为了实现该布局，如果它们的 {{message.id}} 都匹配，我想将下一个 {{message.content}} 附加到先前创建的 div 中。

否则，如果它们不匹配，只需像往常一样创建一个新的 div。 请帮忙谢谢:)

注意：我不想过滤它并将所有内容分组，我之前发布了一个问题但大多数人都误解了它所以我这次发布了一些照片以便更清楚地理解。谢谢 ^_^

Answer 1

您描述的方式可能不是最好的处理方式，但这里是：

<div ng-repeat="message in messages" ng-if="message.id != messages[$index - 1].id" style="border:1px solid red">
    <div >
            <div class="message">
                {{message.content}} - {{$index}}
            </div>
    </div>
  <hr>
    <div  
        ng-repeat="nextMessage in messages | startFrom : $parent.$index + 1"
         ng-if="nextMessage.id == messages[$parent.$index].id && ($index == 0 || nextMessage.id == messages[$index-1].id)" style="border:1px solid blue"
        >
            <div class="message">
                {{nextMessage.content}} - {{$index}}
            </div>
    </div>
</div>

还有一个 ng-repeat 开始索引过滤器from：

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});

添加了两个ng-if-s。一个在 ng-repeat 上跳过与前一个迭代匹配的 id 的迭代，一个在内部显示具有匹配 id-s 的下一个项目和一个嵌套的 ngrepeat 以将每个具有相同 id 的后续消息添加到当前容器 div 直到不同id 存在。

当然，你也可以将第一个内部 div 集成到 ng-repeat 中，但我现在将其分开。

还有没有 css 部分的小提琴，用红色显示分组消息：https://codepen.io/neptune01/pen/Qvzzed