AngularJS ng-repeat not updating after database insert

Question

I'm new to AngularJS. I have been stuck on this all night. I have a form and I want the table to add the new row once I click SUBMIT. The form works fine and adds the document to mongodb but I can not see the update on the table with the binding until I refresh the page.

What am I missing? I see examples on using PUSH but that only seems to work on one dimensional arrays.

ANGULARJS

app.factory('SiteFactory', function($resource) {
  return $resource('/api/sites/:id',{ id:'@_id' });
});

app.controller('SiteListController', function($scope, $location, SiteFactory) {

  // GET LIST OF SITES
  var sites = SiteFactory.query();
  $scope.sites = sites;

  $scope.createSite = function () {

    // validate data passed
    var domain = $scope.domain.trim();
    if (!domain.length) {
        return;
    }
    // POST to API
    var newSite = new SiteFactory();
    newSite.domain         = domain;
    newSite.created        = new Date();
    newSite.$save();

    console.log($scope.sites);
    $scope.sites = SiteFactory.query();
    console.log($scope.sites);
  };

HTML

<form ng-controller="SiteListController">
<input type="text" ng-model="domain">
<button type="button" ng-click="createSite()">SUBMIT</button>
</form>
...
<tbody>
<tr ng-repeat="site in sites | orderBy:'domain'">
<td>{{site.domain}}</td>
<td>{{site.created}}</td>
</tr>
</tbody>
...

CONSOLE.LOG

BEFORE:

[f, f, $promise: Object, $resolved: true]
0: f
1: f
$promise: Object
$resolved: true
length: 2
__proto__: Array[0]

EXAMPLE:
    0: f 
    _id: "53d21d42f9406200001eddc6" 
    created: "2014-07-25T09:02:58.215Z" 
    domain: "originaldata1"
    1: f 
    _id: "53d21d42f9406200001eddc7" 
    created: "2014-07-25T09:02:58.215Z" 
    domain: "originaldata2"

AFTER:

[$promise: Object, $resolved: false]
0: f
1: f
2: f
$promise: Object
$resolved: true
length: 3
__proto__: Array[0]

EXAMPLE:
    0: f 
    _id: "53d21d42f9406200001eddc6" 
    created: "2014-07-25T09:02:58.215Z" 
    domain: "originaldata1"
    1: f 
    _id: "53d21d42f9406200001eddc7" 
    created: "2014-07-25T09:02:58.215Z" 
    domain: "originaldata2"
    2: f 
    _id: "53d21d42f9406200001eddc8" 
    created: "2014-07-25T09:12:58.215Z" 
    domain: "newdata2"

sylwester · Accepted Answer · 2014-07-25 09:47:13Z

2

     $scope.createSite = function () {

        // validate data passed
        var domain = $scope.domain.trim();
        if (!domain.length) {
            return;
        }
        // POST to API
        var newSite = new SiteFactory();
        newSite.domain         = domain;
        newSite.created        = new Date();
        newSite.$save();
//please add new site to arrays of sites
        $scope.sites.push(newSite);

      };

answered Jul 25, 2014 at 9:47

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Kyle Anderson Over a year ago

I had tried that. It doesn't work. I can see the new item in the table after a refresh of the page. The DOM doesn't update.

sylwester Over a year ago

Ca you please add this line to $scope.createSite console.log($scope.sites) and let me know what you get

Kyle Anderson Over a year ago

i added console.log($scope.sites) output to the original question above.

sylwester Over a year ago

@KyleAnderson your mongodb returning object instead of array so you can replace 'push' line with that $scope.sites = SiteFactory.query(); or configure mongodb to return array instead of object

Kyle Anderson Over a year ago

$scope.sites = SiteFactory.query(); did not work. I think Angular Resource is what is making it an object. The API is returning a JSON array.

|

Collectives™ on Stack Overflow

AngularJS ng-repeat not updating after database insert

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related