javascriptangularjsngtable

AngularJS: Ngtable reload to old data


So I'm using NGTable to display data on my page, the data are stored in an array and passed through the dataset param but when I programmatically change the value of a data in the array the changes are displayed correctly in the table BUT when I go to the second page for and go to the first page again the table display the old data.

Here is a JSFiddle that illustrate my problem: http://jsfiddle.net/vqxscmsu/

    angular.module("uCloud", ["ngTable"])
  .controller("myController", myController);

myController.$inject = ["NgTableParams", "$scope"];

function myController(NgTableParams, $scope) {

        $scope.fsck = [{
      name: "teste1",
      description: "testando1"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }, {
      name: "teste2",
      description: "testando2"
    }, {
      name: "teste3",
      description: "testando3"
    }, {
      name: "teste4",
      description: "testando4"
    }]


        this.tableParams = {
    TodoGeneral: null
  };
  this.tableParams['TodoGeneral'] = new NgTableParams({}, {
    dataset: $scope.fsck,
  });

 $scope.test = function() {
    $scope.fsck[0].name = "mais non";
 }
}

Solution

  • use getData instead of dataset in your NgTableParams instantiation. then you can update your table via tableName.reload() which goes and calls getData method.

    The only thing that differs here is the behavior in pagination which you may want to reread in documentations.

    Here is the working fiddle: http://jsfiddle.net/vqxscmsu/17/

    var demo = this;
    // ...
    demo.tableParams['TodoGeneral'] = new NgTableParams({}, {
        getData: function(){
           return $scope.fsck;
         }
    });
    
    $scope.test = function() {
        $scope.fsck[0].name = "mais non";
        demo.tableParams.TodoGeneral.reload();
    }