CODEWITHSUNDEEP
angularjsionic-framework
Non
Non

Reputation: 8599

How to keep the record whether a checkbox has been checked or not?

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

Answers (1)

floribon
floribon

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

Related Questions