CODEWITHSUNDEEP
htmlangularjshtml-tablerefresh
p192
p192

Reputation: 528

AngularJs How to update data table without reloading page

I have the following array in my controller that gets objects from the database:

this.objects = [ //data of array goes here ];

Then I have an html table:

<tbody ng-repeat="object in object.recipients>
    <tr>
        <td>{{object.attribute.content}}</td>
    </tr>
</tbody>

The table is displayed correctly. And I have a delete button that removes objects from the database. But in order to see the changes on my table, I need to refresh the page. How can I have my table updated without refreshing?

Upvotes: 1

Views: 4965

Answers (3)

Ladmerc
Ladmerc

Reputation: 1158

Just delete using a controller function that does:

this.objects.splice(index, 1)

and in your delete button in html, call the delete function and pass the index, or another unique id. e.g

<button ng-click="deleteThis($index)">Delete</button>

$index refers to the current index in the ng-repeat

If you prefer, you can delete from your server, and if success callback/promise is resolved, then delete from the view as explained above

Upvotes: 1

Josh Yolles
Josh Yolles

Reputation: 108

In your delete item function, after splicing the item from the array, save the data to your db, and then immediately use ajax to GET the new data set back. Once finished saving the data to the db, use:

$http.get(...)

to fetch the new data and update the array/table (the way it should be) without having to refresh the page.

Upvotes: 1

Tai Nguyen
Tai Nguyen

Reputation: 105

  1. When you delete record in database. You should reload data from $http and set data for $scope.objects.

  2. Or using delete

    $scope.objects = $scope.objects.slice(1); // 1 is index object

    then delete record in database.

Upvotes: 1

Related Questions