Refreshing AngularJS: How to reload Ngtable with previous data

Currently, I am utilizing NGTable to exhibit data on my webpage. The data is stored in an array and passed through the dataset parameter. However, when I dynamically modify a value in the array, the changes are accurately reflected in the table BUT if I navigate to the second page and return to the first page, the table displays the old data.

For further clarification, here is a JSFiddle demonstrating this issue: 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";
 }
}

Answer №1

Replace the use of dataset with getData when instantiating your NgTableParams. This way, you can update your table using tableName.reload(), which will call the getData method.

The only difference lies in the pagination behavior, which you may want to review in the documentation.

Check out the functional demo here: 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();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The server encountered an unexpected error while processing the request, possibly due to a

My JavaScript file includes an interval function that calls the following code: setInterval(function() { $.getJSON('/home/trackUnreadMsgs', function(result) { $.each(result, function(i, field) { var temp = "#messby" + result[i].from; ...

Upon selecting a checkbox, I desire for a corresponding checkbox to also be marked

I am looking to enhance my current project by incorporating a feature that allows the user to simply check a checkbox with specific content once. For example, I have a recipes page where users can select ingredients they need for each recipe while planning ...

Locating a specific item using its individual ID within Firebase

One thing that's often overlooked in Firebase tutorials is how to retrieve objects based on their unique IDs. The push() method generates these unique IDs automatically, but the question remains: how do we access the specific object associated with an ...

Difficulty Establishing a Connection with SQL Server Using TypeORM

My local machine is running an SQL Server instance, but I'm encountering an error when trying to connect a database from TypeORM. The error message reads: originalError: ConnectionError: Failed to connect to localhost:1433 - Could not connect (seque ...

Tips on effectively utilizing dynamic data with Google Charts

I am working on creating a dynamic chart using Google Charts with multiple CSV files. I want to display a different chart depending on the selection made by the user. The first file loads successfully and displays a chart, but the $("#selection").change(.. ...

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

I am currently working on a Next.js project and have successfully integrated Google Tag Manager (GTM) using the react-gtm-module package. Interestingly, everything works perfectly when the application is initially loaded in debug mode, regardless of the st ...

Display the value of an array based on the current position of another array in AngularJS

When working with javascript, there are two arrays that have equal lengths that are determined by a database value which is unknown. For example: colName=['col1','col2','col3']; fieldValue=['abc','def',&apo ...

The server sends a Status=304 response to one browser's GET request, while providing a 200 response to another browser's request

My focus right now is on troubleshooting my .htaccess file, in which I have the following code: <FilesMatch "\.(html|swf)$"> <IfModule mod_headers.c> Header set Cache-Control "no-cache, public" </IfModule&g ...

Can Three.js be used to create a compact canvas?

I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSiz ...

Try to refrain from invoking effect within a component that is being conditionally rendered

I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...

The background gently fades away, directing all attention to the popup form/element

After extensive searching, I have yet to find a straightforward solution that seems to be a standard practice on the web. My goal is to create a form that appears in the center of the screen when a button is clicked using CSS or jQuery. I would like the ...

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Need help with a renderWorkoutUpdated function that replaces specific workout records with updated values. _renderWorkoutUpdated(currentWorkout) { let html = `<li class="workout workout--${currentWorkout.type}" data-id="${ curre ...

An effective way to pass a value using a variable in res.setHeader within express.js

Attempting to transmit a file on the frontend while including its name and extension. var fileReadStream = fs.createReadStream(filePath); res.setHeader("Content-disposition", `attachment; filename=${fileName}`); fileReadStream.pipe(res); Encount ...

How to Refresh EJS Template in an Express Node.js Application

Currently, I am integrating discord.js with express and facing a challenge. I want my webpage to automatically update whenever the client.on("message") event is triggered. According to my knowledge and research, it seems that rendering an ejs template is o ...

Bring in the content to Notepad utilizing jQuery

How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...

Issues with Angular Material Navbar not updating views

I am still learning angularjs routing and encountering an issue. The ng-view loads the default page Home.html, but it doesn't switch views when moving to a different page. Despite researching various solutions, none of them have solved the problem. My ...

Transferring Data to Model

I am attempting to send a variable to the 'GetFiles' function in a model within web2py using this code snippet where the output is saved as 'a': <script> VARIABLE = 'teststring' a = {{=XML(response.json(GetFiles(VARIABL ...

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

Encountered an error "Not Found" when attempting to establish an AJAX connection between Javascript and Rails

I'm having an issue with a simple Rails controller method. When I call it from JavaScript as an AJAX method, I get the error message "Not Found" in the JavaScript error log, even though the method works fine when accessed directly in the browser. What ...

Adding a table within another table in AngularJS

When dealing with three columns, such as including marks after subjects and the marks also having varying numbers of rows like subjects, what adjustments should be made to the code? Learn how to add multiple rows in one column using angular ng-repeat ...