iOnic应用程序 - 使用$ http.delete从本地JSON文件中删除对象

时间:2015-07-31 09:42:22

标签: json angularjs xmlhttprequest ionic-framework

我正在尝试使用iOnic构建我的第一个混合应用程序。 iOnic使用AngularJS。但对我来说两者都是全新的:)

到目前为止,我对我所取得的成绩感到非常满意,因为如果我被困,我可以找到很多东西,但现在我已经迷失了。

我尝试通过点击我放在每个收藏项目后面的删除按钮来删除我保存在本地JSON文件中的收藏对象。

HTML模板,其中最喜欢的项目按ng-repeat列出:

<ion-view view-title="My Favorites">
<ion-content>
    <ion-list>
      <ion-item ng-repeat="favo in favos" class="row">
        <i class="col icon ion-{{favo.gender}}"></i>
        <a href="#/app/myFavos/{{favo.id}}" class="button-clear col col-80">
            {{favo.name}}
        </a>
        <a class="button button-icon icon ion-trash-b col" ng-click="removeFavo({{favo}})">
        </a>
      </ion-item>
    </ion-list>
</ion-content>

Controller.js文件:

angular.module('starter.controllers', [])

.controller('FavoslistCtrl', function($scope,  myFavos) {

    myFavos.getFavos(function (data) {
        console.log(data);
        $scope.favos = data;
    });

    $scope.removeFavo = function(data) {

        $scope.favos = myFavos.deleteFavo(data);

    };

});

Service.js文件:

angular.module('starter.services', [])

.factory('myFavos', function($ionicLoading, $http) {


  // Might use a resource here that returns a JSON array
  return {

    getFavos: function(callback) {
      $ionicLoading.show();
      $http.get('data/favos.json').success(function (data) {
        console.log("http GET success my favorites");

        console.log("return myFavos", data);
        $ionicLoading.hide();
        return callback(data);

      }).error(function (err) {
        $scope.error = 'Could not load favorites';
      });
    },

    deleteFavo: function(favo) {
$ionicLoading.show();
      $http.delete('data/favos/' + favo + '.json').success(function (data) {
$ionicLoading.hide();
        return callback(data);
      });
    }
  }

});

favos.json:

[
    {
        "id":1,"name":"Adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":2,"name":"Eva","description": "Lorem Ipsum", "gender": "female"
    },
    {
        "id":3,"name":"alex","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":4,"name":"adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":5,"name":"max","description": "Lorem Ipsum", "gender": "male"
    }
]

我一直在尝试使用$ http.delete函数在我制作的名为“myFavos&#39;但我无法弄清楚如何使用正确的ID删除正确的对象。

如果有人可以提供帮助那就太棒了!

更新08-12-2015 10:37上午

我现在更近了一步,感谢Gajotres在我iOnic forum帖子上的回复 我现在在控制台中遇到的唯一错误是:

  

删除http://localhost:8100/data/favos/[object%20object].json 404(未找到)

我将代码更新为当前状态。

1 个答案:

答案 0 :(得分:0)

$scope.removeFavo = function(data) {
    myFavos.deleteFavo(favo); // <=== shouldn't this be data?
}

您使用的是正确的变量??