Question

我正在与html，css和AngularJS进行聊天模型，以获得看起来有点像这样的学校作业（非常基础）

HTML

<div class="chat-box">
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
</div>
<div class="chat-msg-input">
    <input type="text" class="chat-msg-text-input" />
    <button data-ng-click="addMessage()">Send</button>
</div>

CSS

.chat-box {
    border: 1px solid black;
    padding: 10px;
    height: 200px;
    overflow: auto;
}
.chat-msg-user {
    border-bottom: 1px solid red;
}
.chat-msg {
    border: 1px solid red;
}

角

$scope.addMessage = function(){
    $scope.tempMessage.id = $scope.chat[0].chatmessages.length;
    $scope.tempMessage.user = $scope.user.name;
    $scope.tempMessage.sendDate = $scope.dateToString(new Date()).split('-')[0];
    $scope.tempMessage.sendTime = $scope.dateToString(new Date()).split('-')[1];

    $scope.chat[0].chatmessages.push($scope.tempMessage);

    $scope.tempMessage = {};

};

Fillde available here

正如小提琴中所见，我有.chat-box的设定高度，当消息溢出时，滚动条出现（我不使用JQuery，仅用于演示目的）。

现在.chat-msg会根据我的需要附加到.chat-box的底部，但您必须手动向下滚动才能看到最新的消息。我想要的是它会自动向下滚动到最新消息。

我该怎么做？可以使用html，css或AngularJS

修改

使用somae AngularJS与this question的答案结合使用。

制作一个AngularJS函数，其中包含ng-repeat结束后调用的答案。

/修改

转到div中添加的最后一个div

0 个答案: