Once I remove an item from my list, the deleted object's data disappears, but the placeholder (empty row) lingers. (I tried using apply() with no luck)
I have a standard CRUD interface displaying expenses.
<table class="table table-striped">
<tr>
<td>Title</td>
<td>Date</td>
<td>Amount</td>
<td>Payment Method</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.paymentMethod}}</td>
<td><a class="btn btn-primary" ui-sref="editExpense({id:expense._id})">Edit</a></td>
<td><a class="btn btn-primary" ng-click="deleteExpense(expense)">Delete</a> </td>
</tr>
</table>
connected 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');
})
}
})
that interacts with an expense resource factory
angular.module('ExpenseService', []).factory('Expense', function($resource) {
return $resource('api/expenses/:id',{
id:'@_id'},{
update:{method:'PUT'}, delete:{method:'DELETE'}})
});
for communication with a JSON API (using mongodb and node/express on the backend)
Therefore, I'm utilizing ngResource & ui.router to manage state transitions.
Note: If I manually refresh after deleting, everything is fine, but is that something we NEED to do?
.controller('ExpenseListController', function ($scope, $state, $window,Expense) {
$scope.expenses = Expense.query();
$scope.deleteExpense = function (expense) {
expense.$delete(function () {
$scope.expenses = Expense.query();
})
}
})