Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep Checkbox Checked After Navigating Bewteen Partials

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: '/'
            });
    }]);
like image 918
NevrMore Avatar asked Oct 19 '22 05:10

NevrMore


1 Answers

You made so many mistakes in your current code

Here I've mentioned few below.

  1. Don't add full html inside your partial views. They should only mention required html.
  2. Controller should be map to their views from route controller definition.
  3. Use service/factory to share data between different controller.
  4. 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

like image 171
Pankaj Parkar Avatar answered Oct 22 '22 00:10

Pankaj Parkar