AngularJS issue with ng-repeat and save input inside

Question

I'am currently trying to make something similar to facebook post/likes/comment system, so far I have managed to do posts and likes, but I'm having issues with comments.

This is the controller code and the html to show the stuff. The problem is when I'm trying to get input from the 2nd textarea with ng-model="texto", where it should save the comment and save on scope, but seems it's not working. I'm still novice when it comes to angular and how ng-repeat works.

Also it is sending information to database, idPost and user ID, but the text is plain blank.

EDIT I removed the HTTP post part and all database requests are done in AJAX using timer. The problem with comments being sent to database still persists.

<script>
    var app = angular.module('postsApp', []);
    var interval;

    app.controller('postsCtrl', function($scope) {
        $scope.toggle = false;
        $scope.texto = [];
        $scope.status = "";
        $scope.comment = [];
        $scope.comment = "";
        $scope.posts = "";
        $scope.texto = "";
        $scope.idPost = 0;
        $scope.showBox = function(p){

          p.toggle = !p.toggle;



          if(interval == 0){
            interval = setInterval("angular.element($('#postsApp')).scope().servicoLeituraPosts()",1000);
          }else{
            clearInterval(interval);
            interval = 0;
          }

        };
        $scope.iniciaTimer = function(){
               interval = setInterval("angular.element($('#postsApp')).scope().servicoLeituraPosts()",1000);
        };
        $scope.servicoLeituraPosts = function(){        
                $.getJSON(
                        "servicoLeituraPosts.php",
                        {

                        },
                        function(jsonData)
                        {
                            $scope.posts = jsonData;
                            $scope.$apply();
                        });
        };
        $scope.addPost =  function(){                              
                $.post(
                    "addPostRest.php",
                    {
                        "texto" :  $scope.texto
                    },
                    function(dados)
                    {
                        $scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU";
                        $scope.$apply();
                   }
                );
        };
        $scope.addLike =  function(idPost)
            {
                $.post(
                    "addLike.php",
                    {
                        "idPost" : $scope.idPost = idPost
                    },
                    function(dados)
                    {
                        $scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU"
                        $scope.$apply();
                    }
                );
            };
             $scope.addComment =  function(idPost){                              
                $.post(
                    "addComentarioRest.php",
                    {

                        "comment" : $scope.comment,
                        "idPost" :  $scope.idPost = idPost
                    },
                    function(dados)
                    {
                        $scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU"
                        $scope.$apply();
                    }
                );
            };      

    });
</script>

HTML

<div id="postsApp" class="container" ng-app="postsApp" ng-controller="postsCtrl" ng-init="iniciaTimer()"> 


<div class="panel panel-default">
        <div class="panel-heading">
            POSTS 
            <a class="btn btn-success pull-right" href="posts.php"><span class="glyphicon glyphicon-refresh"/></a>          
        </div>

        <div class="panel-body">

            <div class="form-group">
                <label for="texto">Texto::</label>

                <textarea ng-model="texto" placeholder="Coloque aqui a mensagem..." class="form-control" class="form-control" rows="5" name="texto"></textarea>
            </div>

            <button ng-click="addPost()" class="btn btn-success btn-xs" type="button">Enviar</button>      

        </div>
</div>

<div class="posts" id="posts">
    <div class='row ng-scope' ng-repeat="p in posts" >
        <div class='col-md-12'>


            {{ p.nome }} -  {{ p.data }} <p><p>  
            {{ p.texto }}                <p><p>
            {{ p.numeroLikes }}  

            <button ng-click="addLike(p.idPost)" class="btn btn-default btn-xs" type="button">Like</button>    

            <span class="abrir_comentario" ng-click="showBox(p)">Comentários</span>

            <div ng-show="p.toggle" id="comentarios">
                <div class="comentarios">


                    <textarea ng-model="comment" placeholder="Coloque aqui a mensagem..." class="form-control" class="form-control" rows="3" name="comment"></textarea>
                    <p><p><p><button ng-click="addComment(p.idPost)" class="btn btn-success btn-xs" type="button">Enviar</button>

                </div>
            </div> <p>                                                        
        </div>
    </div>
</div>

score 0 · Accepted Answer · answered Jul 16 '17 at 19:45

0

Firstly I would suggest checking if $scope.texto holds your input data using debugger; or console.log();

Secondly, you can check your $http.post() request. Please see this thread, maybe something need to add headers. AngularJs $http.post() does not send data

answered Jul 16 '17 at 19:45

mygeea

463
3
10

Hi thank you for reply, I had to edit my code because I have to use AJAX, so i removed the HTTP part and created a timer. As for debugger I don't seem to be able to get it to work on netbeans – ruipascoal Jul 16 '17 at 20:38
when you send the request can you check in developer tools the network tab to see any parameters get sent? – mygeea Jul 16 '17 at 20:41
i'm sorry but where do i find these developer tools? My IDE is in portuguese so it might be different – ruipascoal Jul 16 '17 at 20:46
depends on which browser you are using. bun on most its F12 – mygeea Jul 16 '17 at 21:39
I think i found this, but i don't see any place where it shows parameters, only, it does say method is POST and content type is text/html, along with other things – ruipascoal Jul 16 '17 at 22:05
check for params or request payload. – mygeea Jul 16 '17 at 22:27
I figured out and it does shows parameters, only the text shows blank like on database, not sure what could be the problem since i'm doing everything the same like when I'm sending posts to database – ruipascoal Jul 16 '17 at 23:23
You cannot use the same ng-model named texto. You have to make them unique in the layout you created. They are on the same controller (on the same $scope). Your texto that is sent is the empty input on the previous form. – mygeea Jul 16 '17 at 23:34
even if i make it different it still shows blank, i created $scope.comment and still nothing – ruipascoal Jul 16 '17 at 23:38
it is done, only added scope comment and changed texto to comment on the comment part – ruipascoal Jul 16 '17 at 23:52
ok I see another problem because you are in the ng-repeat you need a specific ng-model for that input. And because you have the post you can either use p.comment. have a look at https://embed.plnkr.co/TIOpQl0nW7sgzm8U4LnY/ – mygeea Jul 17 '17 at 00:17
but i don't understand how i send the value to the function after with p.comment, do i create a scope called p.comment? – ruipascoal Jul 17 '17 at 00:25
no. You can see in the planker it is dynamically created. Then I updated the button to send the entire p (post) object to the addComment() function. Thusly you can use "comment" : p.comment, "idPost" : p.idPost – mygeea Jul 17 '17 at 00:28
Strange, i did exactly as you suggested but it seems this way it won't even send anything, I did as you suggested, function is recieveing p and sending p.comment and p.idPost, but on browser the addCommentRest request won't even show up on developer tools network – ruipascoal Jul 17 '17 at 08:08
do you have any errors in console? are you reaching the function? do you execute the $.post? – mygeea Jul 17 '17 at 08:22
Oh it seems it is working, I thought it wasn't working because the textbox didn't clear itself after i clicked the button and i didn't see anything on developer tools. I checked database later and i saw all the entries with the text i typed on it, so it is working now aswell as showing the request on developer tools! Seems like the problem was really the ng-model="p.comment". Thanks a lot for the help, now i can advance on project – ruipascoal Jul 17 '17 at 14:34

score 0 · Answer 2 · answered Jul 16 '17 at 19:58

Looks like you're assigning $scope.idpost to the value of the argument idPost for the idPost key in the request object in your addLike and addComment functions.

I also see you're using jQuery's AJAX helpers, but you should be using AngularJS's built in $http service to make POST requests within Angular.

For example, for your comment saving function:

$scope.addComment = function(idPost){
    $http.post("addComentarioRest.php", {
        "texto" :  $scope.texto,
        "idPost" : idPost
    })
    .then(function(dados) {
         if(dados.indexOf("OK") >= 0) {
             $scope.texto = "";
         } else {
             $scope.texto = "FALHOU";
         }
    });
};

Definitely check out the AngularJS Docs on the $http service for more info: https://docs.angularjs.org/api/ng/service/$http

As an aside, you can also reduce the amount of lines of code in the success callback by using the ternary operator: `$scope.texto = dados.indexOf("OK") >= 0 ? "" : "FALHOU"` — Jonathan Hamilton, Jul 16 '17 at 20:02
Hi, thank you for reply, i edited the code on top because I have to do this using AJAX for posts so I removed HTTP and created a timer to read posts every 1second and about the idPost part, it's working but needs a bit of cleaning, i had some issues before because when i clicked like button it refreshed the div and it's not suppose to refresh, but now that one is working properly — ruipascoal, Jul 16 '17 at 20:37

AngularJS issue with ng-repeat and save input inside

2 Answers2