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.content}}附加到先前创建的div，如果它们的{{message.id}}都匹配。

否则，如果他们不匹配，只需像往常一样创建一个新的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，用于添加到当前容器div，每个后续消息具有相同的id，直到不同id存在。

当然，你也可以在ng-repeat中整合第一个内部div，但我现在将它分开。

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

如果他们的id匹配（ANGULAR JS）

1 个答案: