AngularJs How to update data table without reloading page

Question

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?

Ladmerc · Accepted Answer · 2016-08-19 03:24:31Z

1

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

answered Aug 19, 2016 at 3:24

Ladmerc

1,15811 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

p192 Over a year ago

Thanks! Although all answers given were correct, I did not know about the index thing. I was searching through my array for that element to delete it. So +1 for that!

Ladmerc Over a year ago

Don't wanna be a buzzkill, but you should also be aware of this when relying on $index: codementor.io/angularjs/tutorial/…

Tai Nguyen · Accepted Answer · 2016-08-19 03:09:55Z

1

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

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

then delete record in database.

answered Aug 19, 2016 at 3:09

Tai Nguyen

1051 silver badge10 bronze badges

1 Comment

p192 Over a year ago

Thank you for your reply. And for the detail. You are correct.

Josh Yolles · Accepted Answer · 2016-08-19 03:10:57Z

1

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.

edited Aug 19, 2016 at 3:10

answered Aug 19, 2016 at 3:00

Josh Yolles

1081 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

AngularJs How to update data table without reloading page

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related