Попытка сосредоточиться на элементе в $ mdSideNav

Question

Я делаю угловое приложение, в котором есть функция чата. У меня есть sidenav, который загружает сообщения и окно чата. Окно чата фиксируется в нижней части экрана, а сообщения отдельно прокручиваются над ним. Я хотел бы сосредоточиться на последнем сообщении, когда открывается sidenav. Я не уверен, как это сделать, но поскольку сообщения отображаются в ng-повторе.

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, аналогично, вы можете добавить пользовательские эффекты 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>