I am working on a sports list in a mobile app with Ionic, there is a view where the user choose(check) which sports would like to see on the list
<input type="checkbox"
ng-model="sport.checked"
ng-init="sport.checked=true">
and then once he chooses the sports, he goes to the other view
<div ng-repeat="sport in sports">
<div ng-show="sport.checked">
{{sport.name}}
</div>
</div>
but if the user refresh the page or go to any other view and tries to get back to the sports view, he loses the selections of sports he just did, so he needs to perform the action of selecting again which sports he wants to see.
I recorded this video for you to understand easier
on the video you will see that I go to the view and unchecked the first two sports on the list, they disappear but once I refresh the page, those 2 sports will be on the list again.
Maybe the issue is the ng-init so I want you to tell me guys what I need to do to keep the record of which sports he selects ?
You could save the selected options in local storage if you want to keep the settings until you delete the local storage keys/objects.
can you give me a code example ?
you can also use a factory to push your selected items into an array. Your selected categories will remain persistent when you are switching views inside the app. You just have to call the factory inside the controller.
To declare the factory do something like this:
MYAPP.factory('CategoriesFactory', function ($q, $http, $ionicLoading) {
var queries = [];
return {
addQuery: function (query) {
//checking if item exists in array, if not then push it
if(queries.indexOf(query) == -1){
queries.push(query);
} else {
queries.splice(queries.indexOf(query),1);
}
return queries;
},
getSelected: function() {
return queries;
},
};
})
Then in your controller you do it with onclick event like this:
$scope.ClickEvent = function(item) {
userCategories.addQuery(item);
};
and to get all selected categories:
userCategories.getSelected();
is not clear yet for me, look at my controller here:
angular.module('capilleira.clickAndGambleMobile')
.controller('SportsController', function($scope, $state, $ionicModal, $ionicLoading,
$timeout, AuthFactory, SportsFactory) {
$scope.sports = [];
$scope.customer = {};
$ionicLoading.show({
template: 'Loading Sports...<br><div class="button-icon icon ion-loading-d"></div>'
});
AuthFactory.getCustomer().then(function(customer) {
$scope.customer = customer;
SportsFactory.getSportsWithLeagues(customer).then(function(sports) {
$ionicLoading.hide();
if (sports.length) {
$scope.sports = sports;
}else {
AuthFactory.logout();
}
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
}, function(err) {
$ionicLoading.hide();
$state.go('app.login');
console.log(err);
});
$ionicModal.fromTemplateUrl('templates/sportSelectionModal.html', {
scope: $scope
}).then(function(modal) {
$scope.sportSelectionModal = modal;
});
$scope.displaySportSelectionModal = function() {
$timeout(function() {$scope.sportSelectionModal.show();}, 100);
};
$scope.closeSportSelectionModal = function() {
$timeout(function() {$scope.sportSelectionModal.hide();}, 100);
};
$scope.isSportShown = function(sport) {
return $scope.shownSport === sport;
};
$scope.goToLines = function(league) {
var linesParameters = {
customerId: $scope.customer.customer,
top: 10,
familyGameId: -1,
games: -1,
sports: league.sport.id,
leagues: league.id,
periods: league.lineType,
part: league.part
};
$state.transitionTo('app.lines', linesParameters);
};
});
where do you think I should call it ?
and sorry but I am very new to Angular