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

Non 发表于 Dev

非

我正在使用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>

但是如果用户刷新页面或转到任何其他视图并尝试返回到运动视图，则他将丢失刚刚进行的运动选择，因此他需要执行再次选择希望观看的运动的动作。

我录制了这段视频，以方便您理解

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

也许是问题所在，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);
    };
  });

弗洛里邦

关闭/刷新页面后，浏览器中发生的所有内容都会丢失，除非将其持久保存到数据库中，或者对于这种简单情况，您可以使用本地存储。

为了弄清楚这个主意，您可以做一些类似的事情：

<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只是浏览器本身的临时存储：如果用户切换浏览器或使用其他计算机，他将看不到其持久数据。如果要这样做，则需要通过某些数据库将其持久保存在服务器端。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。