Mantieni la casella di controllo selezionata dopo aver navigato tra i parziali

Sto costruendo un'applicazione di calcio fantasy a pagina singola con pagine parziali per ogni posizione e visualizza un elenco di giocatori.Mantieni la casella di controllo selezionata dopo aver navigato tra i parziali

Voglio implementare una casella di controllo accanto a ciascun giocatore e mentre i giocatori vengono abbozzati posso controllare la casella di controllo e far passare una linea attraverso il nome di quel giocatore.

Sto riscontrando problemi nel controllare le caselle di controllo mentre navigo nell'applicazione. Mentre mi muovo tra le pagine, lo stato della casella di controllo è perso. Non sono sicuro di come implementarlo in Angular.js.

Di seguito è riportato il codice per la mia applicazione di prova.

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>

script di routing

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

fonte

2015-07-30 NevrMore

Lei ha fatto tanti errori nel codice corrente

Qui ho citato poco sotto.

Non aggiungere completo html nelle viste parziali. Dovrebbero solo menzionare l'html richiesto.
Il controller deve essere mappato alle loro viste dalla definizione del percorso controller.
Utilizzare il servizio/fabbrica per condividere i dati tra diversi controller.
Utilizzare la regola punto quando si dichiara ng-model che consente di mantenere prototypical inheritance.

Codice

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

fonte

2015-07-30 19:45:53

Il codice che ho postato era solo esempi che ho copiato da internet per lavorare con mentre stavo imparando come fare questo. Grazie per il vostro aiuto, questo è esattamente quello che stavo cercando. – NevrMore

Mantieni la casella di controllo selezionata dopo aver navigato tra i parziali

risposta

Problemi correlati