I have a $localStorage based object array in a service:
.service('storedService', function($localStorage){
this.$storage = $localStorage;
this.$storage.storedItems;
this.addToList = function(item){
this.$storage.storedItems.push(item);
};
})
And the object array is used in a controller:
.controller('storedController', function($scope, $ionicPopup, $http, $localStorage, itemListService, storedService) {
$scope.storedItems = storedService.$storage.storedItems;
$scope.showPopup = function() {
var i = 0;
//Pictures array stores 10 hits with URL of images
$scope.pictures = [];
//newitem is the new object pushed to items array
$scope.newitem = {}
$scope.getPic = function(name) {
$http.get('https://www.googleapis.com/customsearch/v1?key=AIzaSyDKzJO_2-a82Jrn0sA2oSnDgHORcJegCAA&cx=011061616694035020478:dvpxju__yje&searchType=image&lr=lang_no&q=' + name).then(function(resp) {
console.log('Success', resp.data.items);
$scope.pictures = resp.data.items;
$scope.newitem.pic = resp.data.items[0].image.thumbnailLink;
})
$scope.changePic = function() {
if (i == 10) {
i = 0;
} else {
i++;
}
$scope.newitem.pic = $scope.pictures[i].image.thumbnailLink;
}
}
var myPopup = $ionicPopup.show({
template: '<form ng-submit="getPic(newitem.name)"><input type="text" placeholder="Item name" ng-model="newitem.name" ng-blur="getPic(newitem.name)"></br><img alt="Press me!" src="{{newitem.pic}}" style="display:block;width:100px;height:100px;margin-left:auto;margin-right:auto;" ng-click="changePic()"></form>',
title: 'Add new item to list',
subTitle: 'Tip:Tap the image to change it',
scope: $scope,
buttons: [{
text: 'Cancel'
}, {
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
storedService.addToList($scope.newitem);
}
}]
});
}
$scope.data = {
showDelete: false
};
$scope.moveToItems = function(item){
itemListService.addToList(item);
};
})
This takes an object and stores it in the object array. It all works good in the browser, but in Ionic View and on device it does not work. It shows up as undefined. Why is it not undefined in the browser? What am I doing wrong?
your problem is that if there is nothing currently stored in localStorage the storedItems is not an array and is undefined
When service initializes and you assign $storage, check if storedItems is defined and if not assign an empty array to it
this.$storage = $localStorage;
if(!this.$storage.storedItems){
this.$storage.storedItems =[];
}
maybe devices are more slow than your browser. try wrap your code in $ionicPlatform.ready(function () { //**code*/})