2015-05-14 60 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