ng-table in angular js reload() not updating table data

507 views Asked by At

I am unable to get an ng-table to refresh it's view/data using the reload(). Below is a sample plunker but the table shows correctly but when I update the $scope.data and call reload the table does not update even though the array shown on the page does. I've tested on 0.8.3 as well as ng-table 1.0x. Testing filtering the data works

var app = angular.module('ngTableApp', ['ngTable'])
    .controller('selectFilterController', function($scope, $filter, $q, NgTableParams) {
      $scope.data = [{name: "Moroni", age: 50},
                  {name: "Tiancum", age: 43},
                  {name: "Jacob", age: 27},
                  {name: "Nephi", age: 29}
              ];

      $scope.tableParams = new NgTableParams({page: 1, count: 10}, {data: $scope.data});

      //update data array
      $scope.data = [{name: "Moroni", age: 50},
                      {name: "Tiancum", age: 43}];

      //reload table
      $scope.tableParams.reload();

      //set watch for filter  
      $scope.$watch('tableSearch', function(newTerm, oldTerm) {
                $scope.tableParams.filter({ $: newTerm });
                $scope.tableParams.reload();
            }, true);
});

html code

<!DOCTYPE html>
<html>
  <head>
    <link data-require="[email protected]" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />
    <link rel="stylesheet" href="style.css" />

    <script data-require="[email protected]" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="ngTableApp">
    <div ng-controller="selectFilterController">

      <input type="text" ng-model="tableSearch" />

      <table ng-table="tableParams" class="table" >
        <tbody>
          <tr ng-repeat="row in $data">
            <td data-title="'Name'" sortable="'name'">{{ row.name }}</td>
            <td data-title="'Age'" sortable="'age'">{{ row.age }}</td>
          </tr>
        </tbody>
      </table>

      {{data}}
    </div>

  </body>
</html>

https://plnkr.co/edit/TjyjJh4rf2fg2N18NUQc?p=preview

1

There are 1 answers

0
Kevin B On

I figured out a resolution. If you use a getData function it seems to bind and no reload() is required. Not sure why this was working on other pages but this resolved the issue for me.

$scope.tableParams = new NgTableParams({}, { 
                getData: function(){
                    return $scope.data;
                }
            });