Angularjs how to update view after a REST operation?

Question

I am using Angular, I need to refresh the view after DELETE a row. Current code work properly but the Table is not update at all.

Any idea how to change my code?

'use strict'; app.controller('locationsController', ['$scope', 'locationsService', function ($scope, locationsService) {

$scope.locations = [];

locationsService.getLocations().then(function (results) {

    $scope.locations = results.data;

}, function (error) {
    //alert(error.data.message);
});

$scope.deleteLocation = function (locationId) {
    locationsService.deleteLocation(locationId); // UPDATE THE VIEW
};

}]);

<div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Action</th>
                    <th>LocationId</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="location in locations">
                    <td>
                        <a href="#/login">Edit</a>
                        <button ng-click="deleteLocation(location.locationId);">Delete</button>
                    </td>
                    <td>
                        {{ location.locationId }}
                    </td>
                    <td>
                        {{ location.name }}
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <thead>
                <tr>
                    <th>LocationId</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        {{ location.locationId }}
                    </td>
                    <td>
                        <input type="text" name="{{ location.name }}">
                    </td>
                </tr>
        </table>
    </div>
</div>

'use strict';
app.factory('locationsService', ['$http', function ($http) {

    var serviceBase = 'http://localhost:4014/';
    var locationsServiceFactory = {};

    var _getLocations = function () {

        return $http.get(serviceBase + 'api/locations').then(function (results) {
            return results;
        });
    };

    var _deleteLocation = function (locationId) {
        return $http.delete(serviceBase + 'api/locations/' + locationId).then(function (results) {
            return results;
        });
    };

    locationsServiceFactory.getLocations = _getLocations;
    locationsServiceFactory.deleteLocation = _deleteLocation;

    return locationsServiceFactory;

}]);

is `locationsService.deleteLocation` in some way modifying the `$scope.locations` after deletion, or retrieving a new list after deletion? — Patrick Evans, Jul 11 '14 at 11:55
I have posted code for locationsService. I believe at the moment $scope.locations is not touched after deletion. — GibboK, Jul 11 '14 at 11:59
Remove the removed location from `$scope.locations` after deletion, since you are using ng-repeat once removed from the array the directive will automatically remove it from the view. — Patrick Evans, Jul 11 '14 at 12:01
Could you please provide me a sample of code as answer? Thanks guys. — GibboK, Jul 11 '14 at 12:01
of deleting an array item? http://stackoverflow.com/questions/500606/javascript-array-delete-elements — Patrick Evans, Jul 11 '14 at 12:02

score 5 · Accepted Answer · answered Jul 11 '14 at 12:13

5

HTML:

 <button ng-click="deleteLocation(location.locationId, $index);">Delete</button>

JS

$scope.deleteLocation = function (locationId, index) {
    locationsService.deleteLocation(locationId).then(function(){
             $scope.locations.splice(index, 1)

}); // UPDATE THE VIEW
};

answered Jul 11 '14 at 12:13

sylwester

16,498
1
25
33

Make sure to use $scope.ArrayNameNotElement.splice(index,1) . – Iftikhar uddin Feb 11 '16 at 08:08

score 1 · Answer 2 · answered Jul 11 '14 at 12:14

Try this:

view.html

 <div>
<div>
    <table>
        <thead>
            <tr>
                <th>Action</th>
                <th>LocationId</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="location in locations">
                <td>
                    <a href="#/login">Edit</a>
                    <button ng-click="deleteLocation(location.locationId,$index);">Delete</button>
                </td>
                <td>
                    {{ location.locationId }}
                </td>
                <td>
                    {{ location.name }}
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <thead>
            <tr>
                <th>LocationId</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    {{ location.locationId }}
                </td>
                <td>
                    <input type="text" name="{{ location.name }}">
                </td>
            </tr>
    </table>
</div>

Controller.js:

$scope.deleteLocation = function (locationId,index) {

   return locationsService.deleteLocation(locationId).then(function()
  {
     $scope.locations.splice(index,1);
   }); // UPDATE THE VIEW
 };

Angularjs how to update view after a REST operation?

2 Answers2