AngularJs - divの表示場所を制御する必要があります

Question

ユーザーがボットと話し、「発言権」の問題が発生しているチャットシステムを作成していますが、この問題はフロントエンドの問題です。

<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の上方に配置されています。ここでは

はHTMLです。ここで角度コントローラである：私は入力にメッセージを入力するとき

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（）関数をトリガメッセージを配列に追加し、ビューが新しいメッセージを表示できるようにします（ビューはuserMessages配列にクロールされるため）。 addUsersMessages（）はまた、$scope.botMessages[3].available = true;でbotMessageをtrueに設定して、Viewをメッセージのレンダリングに使用します。しかし、ユーザーが書き込んだ新しいメッセージの上に表示するだけです。botMsg divがuserMsg divの上にあるため意味があります。

どうすればbotMessageがuserMessageの下に表示されるようにすることができますか？つまり、#moodセクションの最後に新しいメッセージを表示する必要があります。あなたは何ができるか

おかげ

Answer 1

は、IDまたは日時スタンプのように、あなたのオブジェクトに別のプロパティを追加します（インクリメンタルだろう）と1つに両方のコレクションをマージし、正しい順序でそれらをレンダリングしています。