trying to learn trying to learn - 1 year ago 106
AngularJS Question

AngularJs update data after adding new record

Which is the best way to update comments data when new record is added to database? i recently have this code which is working fine , but I am thinking that this way of coding may take long time if i have large amount of comments.Any help is appreciated

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

I was thinking to push new comment to view if response code is 200

Answer Source

IMO, Better use arrays instead.

Use unshift() method to prepend the ng-repeat list.

var data = [bar,bar2,bar3];
//data = [newItem,bar,bar2,bar3];

Before doing this, make sure that you've successfully populated the database using $http.

As you said that you're think to push, that is also a good option but that will push the new data to the end of the list in the view.

Hope this helps you :)

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

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.items = [{
    name: '1',
    type: 'A'
  }, {
    name: '2',
    type: 'B'
  $scope.prependItem = function () {
      name: '3',
      type: 'C'
<!DOCTYPE html>
<html ng-app="app">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="//" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="//"></script>
    <script src="//"></script>
    <script src="app.js"></script>

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download