0
Good afternoon, everyone
I’m making an app, where, when typing a text, the message should appear on the screen. But something strange happens, only the cards (where the text should be displayed) appear and empty! Without the text.
HTML:
ion-view title="Chat" hide-back-button="false">
<ion-content overflow-scroll="true" padding="true" class="has-header">
<div ng-repeat="mensagem in mensagens">
{{mensagem.nome}}
{{mensagem.msg}}
{{mensagem.hora}}
</div>
</ion-content>
<form name="chatForm">
<ion-footer-bar class="bar-stable item-input-inset">
<!--<button class="button button-clear button-positive button-icon button-camera ion-camera" ng-click="addMedia()"></button>-->
<label class="item-input-wrapper">
<input type="text" ng-focus="inputUp()" ng-blur="inputDown()" name="chat" ng-model="mensagem.chat" placeholder="Texto" ng-required="true" ng-disabled="disableButtonChat"/>
</label>
<!--<button class="button-mic ion-ios-mic"></button>-->
<button class="button button-clear button-positive" ng-disabled="chatForm.chat.$invalid || disableButtonChat" ng-click="enviarMsgChat(mensagem)">Enviar</button>
</ion-footer-bar>
</form>
Controller:
.controller('chatCtrl', function($scope, $http, $window, $ionicScrollDelegate) {
$scope.mensagens = [];
$scope.mensagem = {
chat: ""
}
$scope.enviarMsgChat = function (mensagem) {
var msg = mensagem.chat;
$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 logradouro = $window.localStorage.getItem('logradouro');
var msgChat = {
idUsuario: idUsuario,
nome: nome,
usuario: usuario,
logradouro: logradouro,
mensagem: msg,
dia: dia,
hora: hora
}
$scope.mensagens.push({usuario:usuario, mensagem:msg, hora:hora})
}
})
Try putting a
{{mensagens}}
in your html and see if the array is displayed on the screen.– DiegoAugusto
Is the "Imagecontroller" you’re using? Under your form and under the div "card" leaves "{{messages}}" to see if you change the value when you fill in some input
– André Vicente
Yeah, there really is a weird controller there haha
– DiegoAugusto
It’s this Imagemcontroller I don’t even remember the pq put there kkkkk But I’ll take and do the test you suggested.
– GustavoSevero
I put {{messages}} just below "<div class="card" ng-repeat="message in messages">" and they appeared, 3 times this: {name: "Flávia Schneider", message: "Olá", time: "17:32"}
– GustavoSevero
For having an object already called "message" try to make the loop with ng-repeat="mens in messages" and at the time of writing vc calls {{mens.name}}
– André Vicente
No @Andrévicente, it didn’t work As putting only {{message}} the name the message and the time appear, I tried to do the normal: {message.name}}, but then it doesn’t appear... I think it’s weird.
– GustavoSevero
Weird. Seeing the image you posted from to see that repeats 3 times showing that it has 3 same records. Another thing I would try is to inspect the element and see if "<H2>" and "<p>" are really empty
– André Vicente
Dude, I redid some of the code, based on a video of what a guy did and it worked. I just took the div that makes it appear in 3 parts... I’ll post what I remade
– GustavoSevero
I just edited the codes from my post.
– GustavoSevero
@Andrévicente, I’m managing to make the message appear on the screen, HOWEVER, if I type another message, add the last one and the new one appears, IE, the messages are being overwritten! Need for them to "pile up"
– GustavoSevero
The way it is in the code vc is replacing the message array with the last message that came. You have to push the array. $Scope.mensagens.push(new).
– André Vicente
Hi @Andrévicente. Yes I already did. Just yesterday I found the problem. That part "$Scope.messages = [];" had to be at the beginning of the controller and that $Scope.mensagens.push({user:user, message:msg, time:time}) inside the sending Function. I will post the updated code
– GustavoSevero
That’s right, blz. I’m glad you solved it. Good luck there.
– André Vicente