使用 Angular 存储用户之前是否选中了复选框然后回忆它的最佳方式是什么？

Question

我有点新手，正在学习angular同时开发网络应用程序。这个应用程序类似于待办事项列表（足球队清单），用户可以通过首先选择一个联赛（有 4 个）来浏览菜单，然后应用程序将获取该选择的 ID 并加载下一页根据选择的 ID 对 JSON 文件的 http 请求（希望有意义）。下一页是复选框所在的位置，其中包含该联赛的球队列表，用户只需勾选他们在那个足球赛季访问过的所有足球场。

一切正常，但是我如何使用 localStorage 存储用户是否已签出团队，然后在页面加载时检索它？

我最初使用了 ng-change() 方法，但是这为每个联赛调用了相同的球队，因为我是从 localStorage 调用相同的数据而不是 JSON 文件，这取决于 ID，这使得做完之后感觉。

如有任何建议或帮助，我们将不胜感激！

HTML 包含团队和清单：

<ul class="list-unstyled">
  <li ng-repeat="club in league" ng-click="selectClub(club.id)">
    <input type="checkbox" ng-model="club.done">
    <a href="#/team">{{club.club}} - {{club.ground}}</a>
  </li>
</ul>

获取联赛ID并加载数据的控制器：

trackerControllers.controller('ClubCtrl',  ['$scope', '$http', function($scope, $http) {
    var leagueId=sessionStorage.getItem("leagueId");
    $http.get('JSON/Leagues/league'+leagueId+'.json').success(function(data) {
        $scope.league = data;
    });
}]);

如果我能做些什么让这个问题更清楚，请提出建议。谢谢！

为了更好地了解网站，这里是 link 到新网站 - http://helios.hud.ac.uk/u1170593/MyApp/index.html#/league

还有一个 link 到存储的旧的 - http://helios.hud.ac.uk/u1170593/version1/index.html

Answer 1

监听每个俱乐部复选框的变化。每当输入更改时更新 localStorage。

<ul class="list-unstyled">
  <li ng-repeat="club in league" ng-click="selectClub(club.id)">
    <input type="checkbox" ng-model="club.done" ng-change="updateClub(club)">
    <a href="#/team">{{club.club}} - {{club.ground}}</a>
  </li>
</ul>

$scope.updateClub = function (club) {
    var key = 'clubId-' + club.id;
    if (club.done) {
        localStorage.setItem(key, 'viewed');
    } else {
        localStorage.removeItem(key);
    }
};

然后当您加载数据时检查每个俱乐部是否已被查看。

trackerControllers.controller('ClubCtrl',  ['$scope', '$http', function($scope, $http) {
    var leagueId=sessionStorage.getItem("leagueId");
    $http.get('JSON/Leagues/league'+leagueId+'.json').success(function(data) {
        var i;
        for (i = 0; i < data.length; i++) {
            // check if this team has been viewed
            data[i].done = localStorage.getItem('clubId-' + data[i].id) === 'viewed';
        }
        $scope.league = data;
    });
}]);

Answer 2

the application would take the ID of that selection and load the next page by making a http request for a JSON file

Angular 的美妙之处在于您实际上不会像传统网站那样加载下一页。但它会根据您的用户交互在 "same url" 上呈现不同的 templates/views。

因此，您不需要 'pass' 变量，只需存储它即可。 e.a:

关于用户交互：

$scope.leagueId = 1;

由于范围已传递给控制器。您可以从范围内调用 LeagueId。

$http.get('JSON/Leagues/league'+$scope.leagueId+'.json').success(function(data) {
   $scope.league = data;
});

此外，我建议使用某种数据库来存储您的数据，并使用查询根据输入参数反馈正确的数据。并从服务或工厂调用您的数据，而不是从控制器。

编辑：

我重新阅读了问题并假设您想保存用户输入（无限期？）。

在这种情况下，您肯定需要某种数据库存储和登录功能。因为你需要知道你正在与哪个用户打交道。所以你需要一个 user-table 和一个 table 来定义哪个用户执行了哪些操作。

最好是：

用户 table 存储用户和密码（用于登录）
定义用户可以执行的操作的操作 table。
存储哪个用户执行了哪些操作的用户操作table。

$scope 将不起作用，因为它会在用户关闭浏览器后立即终止。将它存储在会话中是行不通的，因为一旦会话过期，您的用户输入就会丢失。使用 cookie 也不会起作用，因为与会话一样，将跟踪每台计算机的数据。因此，如果您的用户使用另一台计算机，则数据将不可用。

使用 Angular 存储用户之前是否选中了复选框然后回忆它的最佳方式是什么？

Using Angular what would be the best way to store whether a user has previously checked a checkbox and then recall it?

javascript

arrays

json

angularjs

angularjs-ng-repeat