CODEWITHSUNDEEP
javascriptangularjs
user3800799
user3800799

Reputation: 538

AngularJS - refreshing list with new data

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?

Upvotes: 1

Views: 129

Answers (1)

Alon Eitan
Alon Eitan

Reputation: 12025

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

Upvotes: 3

Related Questions