AngularJS - refreshing list with new data

Question

I have the following partial:

<table ng-controller="WebsitesController">
    <tbody>
    <tr ng-repeat="website in websites.data">
        <td>{{website.name}}</td>
        <td>{{website.url}}</td>
    </tr>
    </tbody>
</table>

And this is my controller:

myApp.controller('WebsitesController', function($scope, $http) {
    $http({
        method: 'GET',
        url: config.serverUrl + '/websites'
    }).then(function successCallback(response) {
        $scope.websites = response.data.message;
    });
});

I successfuly load data into my view with this.

But Let's say I want to add "Delete" for each of the items. After the delete process - how is it possible to refresh the list without refreshing the page?

I'm assuming that putting the GET call in a "re-usable" function is included in the process, right?

do you mean you want to remove a row or rows from your object array — oseintow
– oseintow, Commented Feb 23, 2016 at 21:47
I want to "re-load" the websites on my view without refreshing — user3800799
– user3800799, Commented Feb 23, 2016 at 21:49
It's done by angular called two-way-data-binding as far you delete a whole 'website' object and the length of the websites.data will be changed. if you change a single property, you maybe fire a digest cycle by your own. — Eigi
– Eigi, Commented Feb 23, 2016 at 21:49
By 'delete process', do you mean deleting the object from the db? — Bennett Adams
– Bennett Adams, Commented Feb 23, 2016 at 21:49
you are using variable "websites.data" in your template.When you will change that variable from JS (controller) it will update the UI without refresh. Angular keeps in sync the data model and rendered UI if everything is binded properly. — JanisP
– JanisP, Commented Feb 23, 2016 at 21:50

Alon Eitan · Accepted Answer · 2016-02-23 22:02:45Z

3

You need to remove the object from the array, example:

<table ng-controller="WebsitesController">
     <tbody>
        <tr ng-repeat="website in websites.data">
           <td>{{website.name}}</td>
           <td>{{website.url}}</td>
           <td><button ng-click="remove($index)">Remove</button></td>
        </tr>
   </tbody>
</table>

And the remove implantation:

$scope.remove = function( index ) {
     var removedElement = $scope.websites.data.splice(index, 1);
     console.log( removedElement );
};

Basically, you're removing the element from the array by passing its index (the index is invoked by the ngRepeat loop) the the remove function.

Edit: Please read the @charlietfl's comments when applying filters on the ngRepeat loop

edited Feb 23, 2016 at 22:02

answered Feb 23, 2016 at 21:50

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

10 Comments

tutley Over a year ago

I think you might need to remove it from $scope.websites.data but this answer is right. The magic of data binding means that when you remove the item from the array, the view is updated automagically.

charlietfl Over a year ago

But be careful using $index passed to controller...any filters on ng-repeat will change correct index. Safer to do indexing yourself

charlietfl Over a year ago

Just pass object in .... then do var index = $scope.websites.data.indexOf(passedInObject) and make sure it isn't -1

Alon Eitan Over a year ago

@tutley You can, and you should when applying filters on the ngRepeat loop - As mentioned in @charlietfl's comment - I haven't edited my answer since there aren't any filters in this case)

Alon Eitan Over a year ago

@user3800799 - See @charlietfl comment, you need to pass to object itself to the function ng-click="remove(website)" and get the index using var index = $scope.websites.data.indexOf(website)

|

Collectives™ on Stack Overflow

AngularJS - refreshing list with new data

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related