Checking deletion and update ui angular ngResource module

Question

How can I check what is really happening in the below delete function? Every time I delete it says "Success" but the UI doesn't update .

HTML

<md-content >
  <div id="main" class="well">
    <table cellpadding="20" class="table table-bordered table-striped">
      <tr>
        <th ng-repeat="(head, value) in models[0]">
          <span>{{head}}</span>
        </th>
      </tr>
      <tr ng-repeat="row in models">
        <td ng-repeat="(name, value) in row" ng-scope>
          <span ng-click="" ng-bind="row[name]"></span>
        </td>
        <td >
          <a target="_self" href="#" ng-click="downlaodId(row)">Downlaod</a>
        </td>
        <td >
          <a target="_self" href="#" ng-click="deleteId(row)" confirmation-needed="Really Delete?">Delete</a>
        </td>  
      </tr>
    </table>
  </div>
</md-content>

Controller

$scope.deleteId = function (idPassed) {
  fileLoadService.delete({ 'id': idPassed.id }, function(successResult) {
    alert('Deleted');
  }, function (errorResult) {
    // do something on error
    if (errorResult.status === 404) {
      alert('Ooops');
    }
  });
};

my UI looks like this after click delete fileLoadservice

app.factory('fileLoadService', ['$resource',
  function ($resource) {
    return $resource(
      "http://jsonplaceholder.typicode.com/todos/:id",
      { id: "@id" },
      { query: { 'method': 'GET', isArray: true }
    });
 }]);

enter image description here

you should update your `model` on delete – logee Jul 21 '15 at 02:35 — logee, Jul 21 '15 at 02:35

score 3 · Answer 1 · answered Jul 21 '15 at 02:38

3

As you can see from your code:

$scope.deleteId = function (idPassed) {

    fileLoadService.delete({ 'id': idPassed.id },function(successResult) {
        alert('Deleted');
    }, function (errorResult) {

You are doing nothing to the current model, just sending an alert Deleted when you hit the delete button. If you want it to do something else..... you should put that functionality in the code.

For example:

$scope.deleteId = function (idPassed) {

        fileLoadService.delete({ 'id': idPassed.id },function(successResult) {
            var index = $scope.models.indexOf(idPassed);
            $scope.models.splice(index, 1);
            alert('Deleted');
        }, function (errorResult) {

answered Jul 21 '15 at 02:38

Daniel Cottone

4,257
24
39

What do u mean ? This is a method (deleteId(id)) is called by the button in the UI. fileLoad service returns resource. What do i miss her – Dagm Fekadu Jul 21 '15 at 02:46
Your model is never updated. If you want the changes to be reflected on the current screen, you need to update the model. Please check the code I posted above. – Daniel Cottone Jul 21 '15 at 02:48
Thanks,it worked on ui but am not sure if the api is working deletion on the api because when I reload the page it just came up. does jsonplaceholder api persist change for a while – Dagm Fekadu Jul 21 '15 at 02:54
If that's the case, its an issue with your API or possibly the fileLoadService. – Daniel Cottone Jul 21 '15 at 02:55
this is the service it is fine loading the api app.factory('fileLoadService', ['$resource', function ($resource) { return $resource( "http://jsonplaceholder.typicode.com/todos/:id", { id: "@id" }, { "query": { 'method': 'GET', isArray: true } }); }]); – Dagm Fekadu Jul 21 '15 at 02:57

Checking deletion and update ui angular ngResource module

1 Answers1