Question

我正在创建一个聊天系统，其中用户使用机器人说话，我遇到“说话顺序”问题，这个问题是前端问题。

这是HTML：

<section id="mood" class="col-m-12 col-12">

    <div id="botMsg" ng-repeat="botMessage in botMessages" ng-if="botMessage.available">
        <div id="separator" class="col-12">
            <div class="bot-bubble">J-M</div>
            <div class="msg bot-msg">
               {{botMessage.text}}
            </div>
        </div>
    </div>

    <div id="userMsg" ng-repeat="userMessage in userMessages">
        <div id="separator" class="col-12">
            <div class="msg user-msg">
               {{userMessage.message}}
            </div>
        </div>
    </div>

</section>

如您所见，botMsg div位于userMsg上方。这是角度控制器：

app.controller('moodController', ['$scope', '$http',function ($scope,$http){

$scope.userMessages = [];
$scope.addUserMessages = function() {

    $scope.userMessages.push({
        message : $scope.message,
        token   : "token"
    });

    $scope.message = "";

    $scope.botMessages[3].available = true;
};

$http.get('datas/data.json').success(function(data){
    $scope.botMessages = data;
})

}])

我收集机器人消息的Json部分

[
{
    "text" :"Hello Paul, comment vas-tu ? Tu as participé à la réunion Préparation lancement Commercial.",
    "available" : true
},
{
    "text" :"Je voudrais te poser trois questions.",
    "available" : true
},
{
    "text" :"Quel est ton ressenti ?",
    "available" : true
},
{
    "text" :"Super ! Pourquoi ?",
    "available" : false
}
]

基本上，当我在输入中键入消息时，它会触发addUserMessages（）函数，该函数将消息推送到数组并允许View显示新消息（因为视图会爬进userMessages数组）。 addUsersMessages（）还使用$scope.botMessages[3].available = true;将botMessage设置为true，同时使用View来呈现消息。但它只是将它显示在用户刚写的新消息上方，这是有道理的，因为botMsg div高于userMsg div。

我该如何制作，以便botMessage显示在userMessage下面？换句话说，我需要在#mood部分的末尾显示每条新消息。

由于

Answer 1

您可以做的是向对象添加另一个属性，例如id或日期时间戳（将是增量式），并将两个集合合并为一个并以正确的顺序呈现它们。

AngularJs-需要控制div的显示位置

1 个答案: