2

I have an ng-repeat that isn't updating upon changing the data in the array that it is using. I've researched for quite a while but nothing seems to be working. Initially, when the page loads, the ng-repeat displays the first page of a dataset, upon getting new data (the next page) and setting that array with this data, the ng-repeat isn't noticing the change and never populates with the updated array. It would be greatly appreciated if someone could steer me in the right direction on this.

gatekeeper.controller('businessController', ['$scope', 'siteService', function($scope, siteService) {

$scope.page = 1;
$scope.resultsPerPage = 50;
$scope.maxPaginationSite = 10;
$scope.pageCount = 0;
$scope.resultCount = 0;
$scope.getBusinessSites = [];

function getBusinessSites()
{
    siteService.getBusinessSites($scope.page, $scope.resultsPerPage).then(function(response) {
        $scope.getBusinessSites = response.data;
        console.log($scope.getBusinessSites);
        $scope.resultCount = response.data[0].QueryCount;
        $scope.page = response.data[0].Page;
        $scope.pageCount = Math.ceil($scope.resultCount / 50);
    });
}
getBusinessSites();
$scope.pageChanged = function () {
    $scope.page = this.page;
    getBusinessSites($scope.page, $scope.resultsPerPage);

};

}]);

<tbody ng-controller="businessController">

        <tr ng-repeat="site in getBusinessSites">
            <td>{{ site.SiteName }}</td>

            <td class="tableButton">

                <button ng-controller="ModalCtrl" type="button" class="btn btn-default" ng-click="open('lg')">
                    {{ site.ClientName }}
                </button>

                <br />
                <b>Facilities:</b>

                No Data Yet

            </td>

            <td>{{ site.Subdomain }}</td>

            <td>
                <a href={{ site.URL}}> {{ site.URL}} </a>

                <br />

                <b>Go-live Date: </b> No Data Yet

            </td>

            <td>No Data Yet</td>
            <td>{{site.ChannelPartner}}</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
        </tr>
        <div >
            <uib-pagination class="pull-right" boundary-link-numbers="true" max-size="maxPaginationSite" boundary-links="true" total-items="resultCount" ng-model="page" ng-change="pageChanged()"></uib-pagination>
        </div>
    </tbody>
J_S5280
  • 33
  • 1
  • 1
  • 5

3 Answers3

7

The problem is that ng-repeat has referenced on this initial empty array [], when you change $scope.getBusinessSites, you change this variable's reference, but ng-repeat still reference on that empty array in memory.

So, solution is write data directly to array your ng-repeat reference. You can do it with angular.extend function:

Change this line:

$scope.getBusinessSites = response.data;

On this one:

angular.extend($scope.getBusinessSites, response.data);

UPD: Also, if you use loading data not once, you'll need to clear previously loaded data in that array: 
// empties an array
$scope.getBusinessSites.length = 0;
doroshko
  • 640
  • 5
  • 12
  • Much appreciated, making the changes to empty the array and angular.extend did the trick. AngularJS is great, but in the same respect, can be very frustrating. Thanks again! – J_S5280 Mar 13 '16 at 17:29
  • You're welcome. Just don't miss the basics. ;) Variable and arrays references, - all this is not an AngularJS peculiarities, it's JS. Good luck! – doroshko Mar 13 '16 at 17:35
  • i thought it is same as you described, and i create a simple plnkr, can you help to explain why here change the reference is working...http://plnkr.co/edit/7atCfQAnTbikUaGtgYi8?p=preview – huan feng Feb 07 '17 at 08:08
  • @huanfeng really? :) Don't remember why that desicion was in case. Trying to reproduce issue unsuccessfully. Even in angular 1.3 this works well. If you could reproduce the issue, I'll be happy to investigate the reason. – doroshko Feb 08 '17 at 18:43
  • 1
    @doroshko, maybe this guy has answered this question. http://stackoverflow.com/questions/29849293/ng-repeat-not-updating-on-update-of-array/29849368?noredirect=1#comment71351827_29849368 – huan feng Feb 09 '17 at 01:46
  • Thanks for the answer. – Himanshu Pandey Feb 15 '17 at 05:53
1

Try wrapping the tbody inside of a div and but the controller in the div: 

<div ng-controller="BusinessController">
    <tbody>   
        <tr ng-repeat="site in getBusinessSites">
        .
        .
        .
    </tbody>
</div>

and I suggest naming the $scope.getBusinessSites to $scope.businessSites for avoiding confusion :)

Konkko
  • 662
  • 3
  • 15
0

The ng-repeat create its own scope. Try adding $parent to reference your variable on your current controller scope

LTroya
  • 456
  • 7
  • 18