Question

我正在制作一个具有聊天功能的角度应用。我有一个sidenav加载消息和聊天框。聊天框固定在屏幕的底部，消息可以在其上方单独滚动。我想关注sidenav打开时的最后一条消息。我不知道如何做到这一点，因为消息以ng-repeat显示。

HTML：

<div style="display: flex; flex-flow: column; height: 100%;">
<div>
    <md-toolbar class="md-blue-grey" >
        <h1 class="md-toolbar-tools">
            <span>Chat</span>
        </h1>
    </md-toolbar>
</div>
<div style="min-height: 0; flex: 1; overflow: auto;">
    <div style="height: 200px;">
        <div id="messages" ng-repeat="mess in messages track by $index" >

    <md-card  ng-attr-id="mess{{$index}}"  >

        <p ><b>{{mess.user}}</b></p>
        <p >{{mess.time | date:'medium'}}</p>
    </md-card>
</div>
    </div>
</div>
<div>
    <chat-input></chat-input>
</div>
</div>

我不认为你们需要看到我的Javascript，但如果你这样做。让我知道，我会发布它。任何和所有的帮助将不胜感激。

Answer 1

这将更改yr消息的背景颜色，同样地，您可以将自定义效果添加到上一条消息。

<md-card  ng-attr-id="mess{{$index}}"  >
   <span ng-style="$last && {'background-color':'red'}">
      <p ><b>{{mess.user}}</b></p>
      <p >{{mess.time | date:'medium'}}</p>
   </span>
</md-card>

试图关注$ mdSideNav中的元素

1 个答案: