我正在构建一个单页梦幻足球应用程序，其中包含每个位置的部分页面并显示球员列表。
我想在每个球员旁边实现一个复选框，当球员被选中时，我可以选中该复选框并让一条线穿过球员的名字。
我在浏览应用程序时无法保持选中复选框。当我浏览页面时，复选框的状态丢失了。 我不确定如何在 Angular.js 中实现它。
下面是我的测试应用程序的代码。
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>
路由脚本
angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: 'first.html'
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/'
});
}]);
最佳答案
你在当前代码中犯了很多错误
我在下面提到了一些。
- 不要在部分 View 中添加完整的
html。他们应该只提及所需的 html。 - Controller 应该从路由
controller定义映射到它们的 View 。 - 使用服务/工厂在不同 Controller 之间共享数据。
- 在声明
ng-model时使用点规则，这将帮助您维护 prototypical inheritance .
代码
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
};
})
关于javascript - 在部分之间导航后保持选中复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31732267/