Обновить список при нажатии кнопки | Angularjs

Question

Обновить список при нажатии кнопки | Angularjs

0

В настоящее время у меня есть раздел комментариев, где люди могут комментировать сообщение:

<li ng-repeat="comment in post.comments" class="list-group-item comment">
                    <span>
                        <a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
                    <p class="commentActions">
                        <span am-time-ago="comment.created_at"></span> · 
                        <span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
                    </p>
            </li>

И то, что я пытаюсь выполнить, заключается в том, чтобы приведенный выше список обновлялся при добавлении нового комментария:

<form name="addComments">
            <div class="form-group">
                <label for="comment">Comment</label>
                <textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
            </div>
            <div class="form-group">
                <button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
           </div>
        </form>

Используя следующее, я просто добавляю комментарий в базу данных, связывая его с OP:

$scope.addComment = function(){

        var dataObj = {
            body              : $scope.body,
            userId            : $scope.auth.profile.user_id,
            author            : $scope.auth.profile.name
        };  

        postApi.postComment(id, dataObj)  
            .then(function(res){
                $scope.post.comments.push(res);
        });
        $scope.body = "";
    };

Мой вопрос: как обновить список комментариев, чтобы сразу увидеть комментарий и что мне не нужно обновлять мою страницу?

Borni 03 июнь 2016, в 02:37

Источник

0

$scope.post.comments ли $scope.post.comments в вашем контроллере? И postApi.postComment ожидает аргумент id но я не вижу нигде определенного
user2718281 03 июнь 2016, в 00:03
0

Да, это идентификатор поста, который я комментирую (который я получаю через параметры). Все отлично работает, мне просто нужен список, чтобы можно было обновить.
Borni 03 июнь 2016, в 00:11
2

Что возвращается после поста? (console.log (res);)?
Brian 03 июнь 2016, в 01:13

Показать ещё 1 комментарий

Теги:

jquery

angularjs

reload

1 ответ

Ещё вопросы

$scope.post.comments ли $scope.post.comments в вашем контроллере? И postApi.postComment ожидает аргумент id но я не вижу нигде определенного
Да, это идентификатор поста, который я комментирую (который я получаю через параметры). Все отлично работает, мне просто нужен список, чтобы можно было обновить.
Что возвращается после поста? (console.log (res);)?

mrbcg · Accepted Answer · 2016-06-03T01-19-00.000Z

Вот очень простой пример его работы с использованием вашего кода выше. Я вырвал вызов "postApi", потому что не был уверен, что вы используете службу/фабрику/или что-то еще, чтобы сделать свой ави-звонок.

http://codepen.io/jonathanburris/pen/EyjPgP

HTML

<div ng-app="app" ng-controller="controller">
  <li ng-repeat="comment in post.comments" class="list-group-item comment">
    <span>
                        <a ui-sref="user-profile({id: comment.userId})" class="postLink"><strong>{{comment.author}}</strong></a> {{comment.body}} <span>
                    <p class="commentActions">
                        <span am-time-ago="comment.created_at"></span> ·
    <span ng-if="comment.userId == auth.profile.user_id" ng-click="deleteComment(comment._id)" class="commentDelete">Delete</span>
    </p>
  </li>
  <form name="addComments">
    <div class="form-group">
      <label for="comment">Comment</label>
      <textarea class="form-control" id="comment" rows="2" ng-model="body" required></textarea>
    </div>
    <div class="form-group">
      <button ng-click="addComment()" class="btn margin-left btn-success" ng-disabled="addComments.$invalid">Comment</button>
    </div>
  </form>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('controller', function Controller($scope) {
  $scope.post = {
    comments: [
      {
        body: 'Some text',
        userId: 'someId',
        author: 'Some User',
        created_at: 'today'
      },
      {
        body: 'Some text',
        userId: 'someId',
        author: 'Some User',
        created_at: 'yesterday'
      }
    ]
  }

  $scope.addComment = function() {

    var dataObj = {
      body: $scope.body,
      userId: 'someId',
      author: 'Some User'
    };

    $scope.post.comments.push(dataObj);
    $scope.body = "";
  };
});

Я предлагаю, чтобы, если вы следуете этому шаблону и ваша проблема остается, у вас, вероятно, есть ошибка в вашем вызове api. Если это так, ваше "то" никогда не стреляет. Добавьте уловку к вашему вызову api, и вы можете легко устранить это как свою проблему.

Спасибо, спокойной ночи сна прояснилось ... Я использую фабрику ... и я добавлял res в комментарий. но, конечно, мне нужно добавить res.data к нему.
Один вопрос, хотя, есть ли способ сделать то же самое, но с удалением?
Я нашел это сам через соединение & индекс. Спасибо за твою помощь