Checkbox Bewteen Partials Gezinmesinden Sonra Kontrol Edildi

Her konum için kısmi sayfalara sahip olan ve bir oyuncu listesi gösteren tek bir sayfa fantezi futbol uygulaması yapıyorum.Checkbox Bewteen Partials Gezinmesinden Sonra Kontrol Edildi

Her bir oyuncunun yanında bir onay kutusu uygulamak istiyorum ve oyuncular hazırlandıkça, onay kutusunu işaretleyebilir ve bir oyuncu isminin geçtiği bir satıra sahip olabilirim.

Uygulamada gezinirken onay kutularını işaretli tutmakta sorun yaşıyorum. Sayfalar arasında ilerlerken, onay kutusunun durumu kaybolur. Bunu Angular.js'de nasıl uygulayacağımı bilmiyorum.

Test uygulamamın kodu aşağıdadır.

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>

yönlendirme komut

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

kaynak

2015-07-30 NevrMore

Sen

İşte bu koda kadar çok hata yaptı Aşağıda birkaç söz ettik.

Kısmi görünümlerinize tam olarak html eklemeyin. Sadece gerekli html'den bahsetmeliler.
Denetleyici, controller tanımından görünümlerine eşleşmelidir.
Farklı denetleyici arasında veri paylaşmak için servis/fabrika kullanın.
ng-model bildirirken, prototypical inheritance bakımını yapmanıza yardımcı olacak nokta kuralını kullanın.

Kod

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

kaynak

2015-07-30 19:45:53

ben bunun nasıl öğrenme iken çalışmak için internetten kopyalanan sadece örnek oldu yayınlanmıştır kodu. Yardımın için teşekkür ederim, tam da aradığım şey bu. – NevrMore

Checkbox Bewteen Partials Gezinmesinden Sonra Kontrol Edildi

cevap

İlgili konular