How to do two views in one view with Angularjs?

Asked

Viewed 153 times

0

I have a chat app and the problem I’m having is this: When sending a message, it takes a certain amount of time to be sent and appear on the screen, because it goes to a database, via the php backend I made, and then comes back for another php that searches the message and displays on the screen. So one solution that I thought, to break the branch, was the following, to display my messages, right on the screen, as in this example and only then send it to the backend.. I already have a screen that displays the messages coming from the database, but how to do to display, on this screen, the messages I send?

My view:

<div class="card" ng-repeat="mensagem in mensagens">
   <div class="item item-text-wrap">
     <h2>{{mensagem.usuario}}</h2>
     <p> {{mensagem.msg}}</p>
     <p>{{mensagem.hora}}</p>
   </div>
</div>

Controller:

$scope.enviarMsgChat = function (mensagem) {
    //console.log(mensagem);
    $scope.disableButtonChat = true;

    var dia = moment().format(); //2016-02-16 T 16:05:52-02:00
    var diaP = dia.split('T');
    var dia = diaP[0];

    var horaP = diaP[1];
    var horaP2 = horaP.split(':');
    var hora = horaP2[0]+':'+horaP2[1];

    var idUsuario = $window.localStorage.getItem('idUsuario');
    var nome = $window.localStorage.getItem('nome');
    var usuario = $window.localStorage.getItem('usuario');
    var msgChat = {
        idUsuario: idUsuario,
        nome: nome,
        usuario: usuario,
        mensagem: mensagem,
        dia: dia,
        hora: hora
    }

    $http.post("http://www.vigilantescomunitarios.com/www/php/enviaMsgChat.php", msgChat).then(function (data) {
        //console.log(data);
        $scope.disableButtonChat = false;
        pegaMsgsChat();
        $scope.mensagem = {
          chat: ""
        }

    })
}
angularjs ionic

  • The catchMsgsChat() function brings all chat messages, or only the last?

  • Both... all and the last.

  • Have you thought about putting the new message directly in your message array ? The array in the loop is the message, so what you should do is put your message in the array as well.

  • It’s @Andrévicente, but I’m getting beat up to do it.

  • Type $Scope.mensagens.push(msgChat). Places the part of the code where vc arrow the message array. If it is global you can use in the function that receives the values and then use to add the new message to it.

  • Puts the function pegaMsgsChat() in the problem that solves this quickly

Show 1 more comment

1 answer

0

Take the last message and add at the end of your angular message array.

Thus:

$scope.enviarMsgChat = function (mensagem) {
    var idUsuario = $window.localStorage.getItem('idUsuario');
    var nome = $window.localStorage.getItem('nome');
    var usuario = $window.localStorage.getItem('usuario');        
    var idChat = 0;
    var dia = moment().format(); //2016-02-16 T 16:05:52-02:00
    var diaP = dia.split('T');
    var dia = diaP[0];

    var horaP = diaP[1];
    var horaP2 = horaP.split(':');
    var hora = horaP2[0]+':'+horaP2[1];

    var msgChat = {
        idChat: idChat,
        idUsuario: idUsuario,
        nome: nome,
        usuario: usuario,
        msg: mensagem,
        data: dia,
        hora: hora
    }

    $scope.mensagens.push(msgChat);

    $http.post("http://www.vigilantescomunitarios.com/www/php/enviaMsgChat.php", msgChat).then(function (data) {
    //console.log(data);
        $scope.disableButtonChat = false;
        pegaMsgsChat();
        $scope.mensagem = {
           chat: ""
        }

    })
}

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.