2016-08-18 42 views
0

我正在創建一個聊天系統,其中用戶使用機器人說話,我遇到了「發言順序」問題,該問題是一個前端問題。AngularJs-需要控制div的顯示位置

下面是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; 
}) 

}]) 

而且其中I收集機器人消息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()還將botMessage設置爲true,其中$scope.botMessages[3].available = true;允許視圖渲染消息。但它只是將它顯示在用戶剛剛寫入的新消息之上,這是有道理的,因爲botMsg div高於userMsg div。

我該如何使botMessage顯示在userMessage下面?換句話說,我需要在#mood部分末尾顯示每條新消息。

感謝

+0

所以你想要你輸入的任何信息都會顯示在第一行然後機器人信息正確嗎? –

+0

權,像一個真正的聊天會做:) 對於爲例: Botmsg Botmsg Botmsg UserMsg Botmsg – GreatHawkeye

回答

0

你可以做的是另一種屬性添加到您的對象,像一個ID或日期時間戳(將是增量)和兩個集合合併成一個,並使其以正確的順序。