What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

Question

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

I am currently in the process of learning angular as I develop a web application that resembles a todo list, specifically focused on football teams. In this application, users can navigate through a menu to select a league from four options. The application then retrieves data based on the league selected and displays a list of teams with checkboxes. Users can check off the football grounds they have visited during the season.

While the functionality works smoothly, I am looking for guidance on how to store user selections using localStorage and retrieve them upon page load.

Initially, I attempted to use the ng-change() method but encountered issues with displaying the correct data for each league due to retrieving the same data from localStorage instead of the JSON file corresponding to the ID. Any advice or assistance on resolving this would be highly appreciated!

Below is the HTML markup containing the teams and checkboxes:

<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>

Here is the controller code responsible for fetching the league ID and loading the data:

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

If there are any suggestions to improve the clarity of my question, please feel free to provide them. Thank you!

To better visualize the site, here is the link to the new version:

For reference, here is the link to the old version where data was stored differently:

javascript arrays json angularjs angularjs-ng-repeat

Answer 1

Answer №1

Monitor changes in the checkbox for each club and update localStorage whenever there is a change.

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

When fetching data, verify if each club has been viewed previously.

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

Monitor changes in the checkbox for each club and update localStorage whenever there is a change.

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

When fetching data, verify if each club has been viewed previously.

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 3

Answer №2

The program will take the identification number of the selection and load the following page by sending a request for a JSON file over HTTP.

One of the strengths of Angular is its ability to dynamically render different templates or views on the same URL, rather than loading separate pages like a traditional website would do. This eliminates the need to "pass" variables between pages, as you can simply store them within the scope.

For example, upon user interaction:

$scope.leagueId = 1;

Since the scope is accessible to the controller, you can easily retrieve the LeagueId value from it.

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

I recommend utilizing a database to store your data and implementing queries to retrieve specific information based on input parameters. It's also advisable to access the data from a service or factory instead of directly from the controller.

Update:

After reviewing the question again, it seems that you intend to persistently save user inputs. To achieve this, you'll require database storage and user authentication systems to identify users and track their actions.

Here's an ideal setup:

User table for storing user credentials (login)
Action table defining user-permissible actions
User-Action table recording which users have performed which actions

Using $scope won't suffice since it ends when the browser closes, session storage isn't reliable due to expiration, and cookies are limited to individual devices. Hence, a more robust solution involving databases and authentication mechanisms is necessary.

Answer 4

The program will take the identification number of the selection and load the following page by sending a request for a JSON file over HTTP.

One of the strengths of Angular is its ability to dynamically render different templates or views on the same URL, rather than loading separate pages like a traditional website would do. This eliminates the need to "pass" variables between pages, as you can simply store them within the scope.

For example, upon user interaction:

$scope.leagueId = 1;

Since the scope is accessible to the controller, you can easily retrieve the LeagueId value from it.

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

I recommend utilizing a database to store your data and implementing queries to retrieve specific information based on input parameters. It's also advisable to access the data from a service or factory instead of directly from the controller.

Update:

After reviewing the question again, it seems that you intend to persistently save user inputs. To achieve this, you'll require database storage and user authentication systems to identify users and track their actions.

Here's an ideal setup:

User table for storing user credentials (login)
Action table defining user-permissible actions
User-Action table recording which users have performed which actions

Using $scope won't suffice since it ends when the browser closes, session storage isn't reliable due to expiration, and cookies are limited to individual devices. Hence, a more robust solution involving databases and authentication mechanisms is necessary.

What would be the most efficient method in Angular for saving and retrieving information on whether a user has previously selected a checkbox?

Answer №1

Answer №2

Similar questions

Creating a Wordpress Metabox that utilizes radio inputs generated with Javascript instead of the traditional checked() function in Javascript as an alternative

Unknown individual, yet revealed by the investigator

undefined event typescript this reactjs

Tips for presenting random images from an assortment of pictures on a webpage

Spontaneous Link with JQuery and Colorbox

Is there a way to automatically collapse all the collapsible elements within the accordion when closing it?

Tips for handling two distinct versions of a single field during JSON parsing

Reasons for a service not receiving events

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Ways to effectively go through local storage using a loop

Can you tell me the name of this particular file format?

Real-time webpage featuring dynamically updating text sourced from a file

Troubles with setting up slash commands in discord.js v13

Executing a Shortcode Using a Button in Visual Composer for Wordpress

Jolt Shift for adding extracted information

Shift the sideways movement of the triangle symbol

Merge two arrays based on date and sort them using Angular.js/JavaScript

Inquiring about a particular key-value in a buffer variable in GoLang

utilizing vuex store within a JavaScript document

The performance of Controller.Json method decreases when working with IQueryable objects