Keep Checkbox Checked After Navigating Bewteen Partials

Question

I'm building a single page fantasy football application which has partial pages for each position and displays a list of players.

I want to implement a checkbox next to each player and as players get drafted I can check the checkbox and have a line go through that players name.

I'm having problems keeping the checkboxes checked as I navigate through the application. As I move through the pages the sate of the checkbox is lost. I'm not sure how to implement this in Angular.js.

Below is the code for my test application.

index.html

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="jquery.cookie.js"></script>
</head>

<body ng-app="RoutingApp">
    <h2>AngularJS Routing Example</h2>
    <p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
    <div ng-view>
    </div>
</body>
</html>

first.html

<!DOCTYPE HTML>
<html>
  <head>
    <script src="jquery.cookie.js"></script>
    <meta charset="utf-8">
    <title>Persist checkboxes</title>
    <style>
    button{
      margin-top:8px;
    }
    </style>
  </head>

  <body>
  <h1>First Page</h1>
    <div>
      <label for="option1">Option 1</label>
      <input type="checkbox" id="option1">
    </div>
    <div>
      <label for="option2">Option 2</label>
      <input type="checkbox" id="option2">
    </div>
    <div>
      <label for="option3">Option 3</label>
      <input type="checkbox" id="option3">
    </div>

    <button>Check all</button>

   </body>
</html>

second.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>

    <script>
      angular.module('app', [
        'ngStorage'
      ]).

      controller('Ctrl', function(
        $scope,
        $localStorage
      ){
        $scope.$storage = $localStorage.$default({
          x: 42
        });
      });
    </script>
  </head>

  <body ng-controller="Ctrl">
    <button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
  </body>

</html>

routing script

angular.module('RoutingApp', ['ngRoute'])
    .config( ['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/first', {
                templateUrl: 'first.html'
            })
            .when('/second', {
                templateUrl: 'second.html'
            })
            .otherwise({
                redirectTo: '/'
            });
    }]);

Pankaj Parkar · Accepted Answer · 2015-07-30T19:57:52.567

You made so many mistakes in your current code

Here I've mentioned few below.

Don't add full html inside your partial views. They should only mention required html.
Controller should be map to their views from route controller definition.
Use service/factory to share data between different controller.
Use dot rule when declaring ng-model that will help you to maintain prototypical inheritance.

Code

angular.module('RoutingApp', ['ngRoute', 'ngStorage'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/first', {
        templateUrl: 'first.html',
        controller: 'FirstCtrl'
      })
      .when('/second', {
        templateUrl: 'second.html',
        controller: 'SecondCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

angular.module('RoutingApp').controller('SecondCtrl', function($scope, $localStorage) {
    $scope.$storage = $localStorage.$default({
      x: 42
    });
  })
  .controller('FirstCtrl', function($scope, $localStorage, checkboxService) {
    $scope.model = checkboxService.data
  })
  .service('checkboxService', function() {
    var checkboxService = this;
    checkboxService.data = {
      option1: false,
      option2: false,
      option3: false
    };
  })

Working Plunkr

The code that I posted was just examples that I copied off the internet to work with while I was learning how to do this. Thank your for your help, this is exactly what I was looking for. — NevrMore, Jul 30 '15 at 20:10

Keep Checkbox Checked After Navigating Bewteen Partials

1 Answers1