Feedback system in angular JS

Navigation
2

I am trying to implement a comment system for my posts in angular js with Laravel . The problem I have is that adding a comment does not add to the list of comments but it eliminates the last one placed in the list and adds the most recent one.

My html : 

<div class="mdl-card__actions mdl-card--border" ng-controller="CommentController as c"><!--Micontrolardor para agregar los comentarios-->
        <ul class="img-comment-list" id="commentload">

          <li ng-repeat="comments in p.comentarios"><!--Lista de comentarios-->
              <div class="comment-img">
                <img src="{{comments.users.mini_profile_pic}}">
              </div>
              <div class="comment-text">
                  <strong><a href="{{comments.users.username}}">{{comments.users.username}}</a></strong>
                  <p>{{comments.body}}</p> <span class="date sub-text">{{comments.created_at | timeLib}}</span>
              </div>
          </li>
          <div ng-repeat="cmt in listCmt" ng-include="'views/comment-list-template.html'"></div><!--Aqui cuando comentan se agregan los comentarios solo que no se suman-->
        </ul>
        <form>
          <div class="comment_it commentupdate">
            <div class="up_img">
              <img src="" width="35" height="35" />
            </div>
            <div class="comments-text-post-area">
              <input type="hidden" ng-model="c.cid"  ng-init="c.cid = p.id">
              <textarea class="add-y-comment" ng-model="c.comment" placeholder="Comentar"></textarea>
            </div>

            <div class="comment-post-wall">
              <div class="cancel-comment">
                  <button type="button" name="button" class="mdl-button mdl-js-button mdl-button--raised" id="" rel="">CANCELAR</button>
              </div>
              <div class="send-comment">
                    <button type="submit" name="button" class="mdl-button mdl-js-button mdl-button--raised" ng-click="c.addComment()">ENVIAR</button>
              </div>
            </div>

          </div>
        </form>
      </div>

My CommentController driver: 

(function() {
    'use strict';

    angular
        .module('apiFromApp')
        .controller('CommentController', CommentController);

    CommentController.$inject = ['$http', '$scope', 'CONFIG'];

    /* @ngInject */
    function CommentController($http, $scope, CONFIG) {
        var self = this;




        self.addComment = function() {
          var cmt = {
            id: self.cid,
            text: self.comment
          }
          $http.post(CONFIG.APIURL + 'post/comment', {id: cmt.id, text: cmt.text }).success(function(res) {
            $scope.listCmt = res;
            self.comment = "";
          });

        }
    }
})();
    
asked by vdjkelly 17.05.2016 в 02:24
source

1 answer

1

According to what I can see, you should declare $scope.listCmt out of the function and review what the post method returns. 

function CommentController($http, $scope, CONFIG) {
    var self = this;

    $scope.listCmt = []; /* Declaro mi array de comentarios */


    self.addComment = function() {
      var cmt = {
        id: self.cid,
        text: self.comment
      }
      $http.post(CONFIG.APIURL + 'post/comment', {id: cmt.id, text: cmt.text }).success(function(res) {

         /* si el método post solo devuelve el último comentario */
        $scope.listCmt.push(res);

        /* Otra forma sería llamar todos los comentarios */
       $http.get(URL-DEL-METODO-GET).success(function(res){
           $scope.listCmt=res
        })


        self.comment = "";
      });

    }
}

I recommend this style guide that is based on my workplace: Style Guide

    
answered by 17.05.2016 в 22:18
Help with indentation in Eclipse Error generating "Source: File" php