Question

我想在我的视图中更新特定的div，而不是重新加载整个页面。这是我的剧本。

$scope.submitComment = function() {
    $http({
        url: "comment",
        method: "POST",
        data: $.param($scope.commentData),
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(response) {
        console.log(response);
        $scope.loading = true;
        //location.reload();
        $scope.loading = false;
    }).error(function(response) {
        console.log(response);
        alert('Sorry an error occured');
    });
};

这是我的观点

<div ng-controller="myController">
     <br> <br> <br> <br>

<form ng-submit="submitComment()" id="form">
  <div class="form-group">
    <label for="author">Author: </label>
    <input id="author" class="form-control " type="text" ng-model="commentData.author" name="author" placeholder="Enter author">
 </div>

<div class="form-group">
  <label for="message">Message:</label> @{{ commentData.message }}
  <textarea id="message" class="form-control" ng-model="commentData.message" name="message" placeholder="Enter Comment" rows="8" cols="40"></textarea>
</div>

<div class="form-group pull-right">
  <button type="submit" class="btn btn-primary"><i class="fa fa-comment-o">&nbsp;Comment</i></button>
  <!-- <input class="btn btn-primary" type="submit" value="Comment"> -->
  </div>
</form>

<h2>Comments</h2> <hr>
  <div ng-repeat="comment in comments">
    <div><strong>@{{ comment.author }}</strong></div>
    <div>@{{ comment.message }} <button type="button" ng-click="deleteComment(comment.id)" class="btn btn-danger-outline btn-sm" id="submit">Delete</button></div>
   <br>
 </div>
</div>

我想更新我的表单，以便其中的文字。并且还更新我的评论。我需要帮助。

Answer 1

在$scope.submitComment()方法$http.success()中，您需要$scope.comments.push($scope.commentData)，您应该好好去。

$scope.submitComment = function() {
    $http({
        // ...
    }).success(function(response) {
        $scope.comments.push($scope.commentData);
    });
};

Angular js更新div而不更新整个页面

1 个答案: