CODEWITHSUNDEEP
javascriptangularjs
Tabascow
Tabascow

Reputation: 71

No refresh on Ng-repeat after a $http deletion

After deleting an entry from my collection, values of the deleted object are gone, but the line (blank) remains. (tried apply()...no success)

I have a typical CRUD ui with a view of expenses.

 <table class="table table-striped">
    <tr>
        <td>Titre</td>
        <td>Date</td>
        <td>Montant</td>
        <td>Méthode de paiement</td>
        <td></td>
        <td></td>
    </tr>
    <tr ng-repeat="expense in expenses">
        <td>{{expense.title}}</td>
        <td>{{expense.date}}</td>
        <td>{{expense.amount}}</td>
        <td>{{expense.paiementMethod}}</td>
        <td><a class="btn btn-primary" ui-sref="editExpense({id:expense._id})">Editer</a></td>
        <td><a class="btn btn-primary" ng-click="deleteExpense(expense)">Supprimer</a> </td>
    </tr>
</table>

binded to an expense Controller

angular.module('ExpenseCtrl', [])
.controller('ExpenseListController', function ($scope, $state, $window,Expense) {

    $scope.expenses = Expense.query();

    $scope.deleteExpense = function (expense) {
        expense.$delete(function () {
            $state.go('expenses');
        })
    }
})

which is feeded by an expense resource factory

angular.module('ExpenseService', []).factory('Expense', function($resource) {
return $resource('api/expenses/:id',{
    id:'@_id'},{
    update:{method:'PUT'}, delete:{method:'DELETE'}})

});

to Communicate with an Json API (mongodb and node/express in the back)

As so, i'm using ngResource & ui.router to handle states scenarios.

Note: If i refresh manually from the delete function, everything's ok, but is it something we HAVE to do ?

.controller('ExpenseListController', function ($scope, $state, $window,Expense) {

    $scope.expenses = Expense.query();
    $scope.deleteExpense = function (expense) {
        expense.$delete(function () {
            $scope.expenses = Expense.query();
        })
    }
})

Upvotes: 0

Views: 161

Answers (1)

Tom A
Tom A

Reputation: 964

You have to remove it from the expenses array on the scope somehow, be it through re-querying or just by removing it from the array upon successful server-side deletion. An $http request by itself does not effect the $scope.expenses object.

Upvotes: 2

Related Questions