Reputation: 8599
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 ?
UPDATE
base on your answer, look at my controller:
angular.module('myApp')
.controller('SportsController', function($scope, $state, $ionicModal, $ionicLoading,
$timeout, AuthFactory, SportsFactory) {
$scope.sports = [];
$scope.customer = {};
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);
});
$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);
};
});
Upvotes: 1
Views: 2514
Reputation: 19193
Everything that happens in the browser will be lost when the page is closed/refreshed, unless it is persisted either into a database, or for a simple case like this one you could use the local storage.
To get the idea, you could do something likle this:
<input type="checkbox"
ng-model="sport.checked"
ng-change="save(sport.checked)"
ng-init="sport.checked = CONFIG.sport">
In the controller:
$scope.CONFIG = localStorage.getItem('CONFIG');
if (!$scope.CONFIG) {
$scope.CONFIG = {sport: true};
}
$scope.save = function(checked) {
$scope.CONGIF.sport = checked;
localStorage.setItem('CONFIG', $scope.CONFIG);
}
Basically when the user check, you store that into the localStorage (here using a CONFIG
variable, but it could be anything). Then on page initialization, you read the value of the localStorage.
localStorage is just a temporary storage into the browser itself: if the user swktches browser or use another computer he will not see his persisted data. If you want to do that it needs to be persisted server side via some database.
Upvotes: 4