I'm trying to build my first hybrid-app, i'm trying this with iOnic but also to AngularJS. Both are totally new for me :)
But so far I'm pretty happy with the results I made because I can find a lot of stuff if I'm stuck, but now I'm lost.
I'm trying to delete a favorite object I have saved in a local JSON file by clicking the remove button that I have placed behind every favorite item.
HTML template where the favorite items are listed by 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.id)">
</a>
</ion-item>
</ion-list>
</ion-content>
Controller.js file:
angular.module('starter.controllers', [])
.controller('FavoslistCtrl', function($scope, myFavos) {
myFavos.getFavos(function (data) {
console.log(data);
$scope.favos = data;
});
$scope.removeFavo = function(data) {
myFavos.deleteFavo(favo);
}
})
.controller('FavoCtrl', function($scope, $stateParams, myFavos) {
$scope.favo = myFavos.getFavos($stateParams, favoId);
myFavos.getFavo(function ($stateParams, favoId, data) {
$scope.favo = data;
})
});
Service.js file:
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) {
$http.delete('data/favos/' + favos.id + '.json').success(function (data) {
return callback(data);
});
},
getFavo: function(favoId) {
for (var i = 0; i < favos.length; i++) {
if (favos[i].id === parseInt(favoId)) {
return favos[i];
}
}
return null;
}
}
});
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"
}
]
I have been trying it with the $http.delete function in the factory I made called 'myFavos' but I can't figure out how to delete the right object, with the right id.
If someone could help that would be awesome!
