Question

我正在使用Ionic在移动应用程序中制作体育列表，有一个视图，用户可以选择（检查）哪些体育项目希望在列表中看到

<input type="checkbox"
       ng-model="sport.checked"
       ng-init="sport.checked=true">

然后一旦他选择了这项运动，他会转向其他观点

<div ng-repeat="sport in sports">
    <div ng-show="sport.checked">

      {{sport.name}}

    </div>
</div>

但是如果用户刷新页面或转到任何其他视图并尝试回到体育视图，他就会失去他刚才所做的运动选择，所以他需要再次选择他想要的运动看。

I recorded this video for you to understand easier

在视频中你会看到我进入视图并取消选中列表中的前两项运动，它们会消失，但一旦我刷新页面，这两项运动将再次出现在列表中。

也许这个问题是ng-init，所以我想告诉大家我需要做些什么来记录他选择哪些运动？

更新

根据你的答案，看看我的控制器：

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);
    };
  });

Answer 1

当页面关闭/刷新时，浏览器中发生的一切都将丢失，除非它被持久存储到数据库中，或者对于像这样的简单情况，您可以使用本地存储。

为了得到这个想法，你可以做一些喜欢这个的事情：

<input type="checkbox"
   ng-model="sport.checked"
   ng-change="save(sport.checked)"
   ng-init="sport.checked = CONFIG.sport">

在控制器中：

$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);
}

基本上，当用户检查时，将其存储到localStorage（这里使用CONFIG变量，但它可以是任何东西）。然后在页面初始化时，您将读取localStorage的值。

localStorage只是浏览器本身的临时存储：如果用户浏览浏览器或使用其他计算机，他将无法看到他的持久数据。如果你想这样做，它需要通过一些数据库保持服务器端。

如何保存记录是否已选中复选框？

1 个答案: