Search code examples
angularjsangularjs-ng-repeatangularjs-controlleras

Refreshing ng-repeat without $scope, without new request to sever


I have a table with this content:

 <tbody>
     <tr ng-repeat="result in ctrl.result track by $index">
       <td ng-bind="$index+1"></td>
       <td ng-bind="::result.title"></td>
       <td> <button type="button" class="btn" ng-click='ctrl.deleteItem(result)'>Delete</button></td>
     </tr>
 </tbody>  

And in my controller I have:

 vm.deleteItem = function (result) {
        myService.deleteItem(result.id)
           .then(function (response) {
                vm.result.splice(result, 1);
            });
    };

As you see, the vm.result has changed if the item be deleted successfully. Now, the item deleted in db, so we have response and then the item has been removed from vm.result, too. But the list hasn't updated in browser.
As you see, I use controller as approach and not $scope .


Solution

  • Try deleting the item this way:

    vm.result.splice(vm.result.indexOf(result), 1);
    

    The first Splice parameter should be the index of element rather than element itself.