使用Angular存储用户以前是否选中过复选框，然后再调用它的最佳方式是什么

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

本文关键字：调用 然后 是什么 方式 最佳 复选框 用户 存储 Angular 是否 使用      更新时间：2023-09-26

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

这一切都很好，但是我如何存储用户是否使用localStorage签出了团队，然后在页面加载时检索它？

我最初使用的是ng-change（）方法，但它为每个联盟调用相同的球队，因为我从localStorage调用相同的数据，而不是根据ID调用JSON文件，这在我完成后是有意义的。

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

包含团队和检查表的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;
    });
}]);

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

为了更好地了解该网站，以下是新网站的链接-http://helios.hud.ac.uk/u1170593/MyApp/index.html#/league

还有一个链接，指向存储-http://helios.hud.ac.uk/u1170593/version1/index.html

倾听每个俱乐部复选框的变化。只要输入发生更改，就更新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;
    });
}]);

应用程序将获取该选择的ID并加载下一个通过对JSON文件发出http请求

Angular的美妙之处在于，你实际上不会像传统网站那样加载下一个页面。但它会根据用户交互在"同一个url"上呈现不同的模板/视图。

正因为如此，您不需要"传递"变量，只需存储即可。例如：

用户交互：

$scope.leagueId = 1;

由于作用域已传递给控制器。您可以在范围内调用联盟ID。

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

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

编辑：

我重读了这个问题，并假设您希望保存用户输入（无限期？）。

在这种情况下，你肯定需要一些数据库存储和登录功能。因为你需要知道你在和哪个用户打交道。因此，u需要一个用户表和一个定义哪个用户执行了哪些操作的表。

优选：

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

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

相关文章：