2015-05-14 55 views
1

我正在制作一个具有聊天功能的角度应用程序。我有一个加载消息和聊天框的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支持,但是如果你这样做。让我知道,我会发布它。任何和所有的帮助将不胜感激。

回答

0

这将改变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> 
+0

这对我不起作用。没有显着的效果。 – BobDoleForPresident

+0

这将突出显示年轻md卡中的最后一张md卡。用年代码代替快速帮助。 – nitin