添加新记录后AngularJs更新数据答案

【问题标题】：AngularJs update data after adding new record添加新记录后AngularJs更新数据
【发布时间】：2016-09-26 01:18:41
【问题描述】：

当新记录添加到数据库时，更新 cmets 数据的最佳方法是什么？我最近有这段代码运行良好，但我认为如果我有大量 cmets，这种编码方式可能需要很长时间。感谢任何帮助

function addComment(comment){
    dataservice.addComment(comment).then(function(response){
        if(response.status == 200){
            vm.getArticleComments(); // this will make new request to backend to fetch all comments
            comment.body = '';
        }else{
            return false;
        }
    });
 }

我正在考虑推送新评论以查看响应代码是否为 200

【问题讨论】：

如果我是你，我会在响应状态为 200 时在视图中推送新评论。无需获取所有 cmets 并发送该请求
@Akis 是的，我就是这么做的

标签： angularjs xmlhttprequest

【解决方案1】：

IMO，最好改用数组。

使用unshift() 方法添加ng-repeat 列表。

var data = [bar,bar2,bar3];
data.unshift(newItem);
//data = [newItem,bar,bar2,bar3];

在执行此操作之前，请确保您已使用 $http 成功填充数据库。

正如您所说，您想推送，这也是一个不错的选择，但会将新数据推送到视图中列表的末尾。

希望对你有帮助:)

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

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.items = [{
    name: '1',
    type: 'A'
  }, {
    name: '2',
    type: 'B'
  }];
  
  $scope.prependItem = function () {
    $scope.items.unshift({
      name: '3',
      type: 'C'
    });
  };
}]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="//code.angularjs.org/1.2.6/angular.min.js"></script>
    <script src="//code.angularjs.org/1.2.6/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="item in items" watch-scope="item">
        <div class="someClass">Item name: {{item.name}}</div>
        <div class="anotherClass">Item type: {{item.type}}</div>
    </div>
    
    <button ng-click="prependItem()">Add New</button>
  </body>

</html>

【讨论】：

感谢您的帮助！ unshift 方法完全符合我的要求