HTML上未显示角度本地存储阵列

我在localstorage的数组中保存了一个前5名高分的列表，但当我试图在HTML中显示它时，它不会出现。

我使用GameService.getScores((函数从本地存储中获取数组，并引用$scope.scores数组以HTML形式填充我的列表。

我是Angular an Node.js中的一个小人物，我不知道自己做错了什么。有什么想法吗？

这是我的控制器文件和HTML文件：

var app = angular.module('app', []);
app.controller('GameController', function($scope, GameService) 
{
var highScores = GameService.getScores();

$scope.scores = highScores;
$scope.submitEntry = function() 
{
if (typeof $scope.name === 'undefined' || typeof $scope.word === 'undefined') 
{
			return;
}

var entry = {
name: $scope.name,
			word: $scope.word
};

var score = GameService.submitEntry(entry);
var userScore = {
name: entry.name,
			points: score
		};

if (score > 0)
{
if ($scope.scores.length < 5)
{
$scope.scores.push(userScore);
localStorage.setItem("highScores", JSON.stringify($scope.scores));
return;
}
else
{
for (let i = 0; i < $scope.scores.length; i++) 
{
if (score > $scope.scores[i].points)
{
$scope.scores.splice(i, 1, userScore);
localStorage.setItem("highScores", JSON.stringify($scope.scores));
return;
}
}
}
}
};
});
app.service('GameService', function($http) 
{
this.getScores = function() 
{
var hs = [];

if(localStorage.getItem('highScores') != null)
{
hs = localStorage.getItem('highScores');
if (hs) 
{
hs = JSON.parse(hs);
} 
}

return hs;
	};
this.submitEntry = function(entry) 
{
var score = 0;

var revStr = "";
var str = entry.word;
var i = str.length;
for(var j=i; j>=0; j--)
{
revStr = revStr + str.charAt(j);
}
if(str == revStr)
{
alert(str + " is Palindrome");
score = str.length;
}
else
{
alert(str + " is not a Palindrome");
}
return score;
	};
});

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

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="ng/app.js"></script>
<body >
<div ng-controller="GameController" class='container'>
<h1>Palindrome Game</h1>
		  <h2>Submit a new word!</h2>
<form role='form'>
<div class='form-group'>
<input ng-model="name" class='form-control' placeholder="Your name">
<input ng-model="word" class='form-control' placeholder="Word">
<button ng-click='submitEntry()' class='btn btn-default'>Submit word</button>
</div>
</form>

<h2>Top Scores</h2>
<ul class='list-group'>
			  <li ng-repeat="score in scores | orderBy:'-points'" class='list-group-item'>
				  <strong>{{score.name}}</strong> {{score.points}} points
			  </li>
		  </ul-->
</div>
</body>
</html>

您的代码实际上正在工作：https://jsfiddle.net/BPagoaga/8jcuqds7/1/

<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body >
<div ng-controller="GameController" class='container'>
<h1>Palindrome Game</h1>
<h2>Submit a new word!</h2>
<form role='form'>
<div class='form-group'>
<input ng-model="name" class='form-control' placeholder="Your name">
<input ng-model="word" class='form-control' placeholder="Word">
<button ng-click='submitEntry()' class='btn btn-default'>Submit word</button>
</div>
</form>
<h2>Top Scores</h2>
<ul class='list-group'>
<li ng-repeat="score in scores | orderBy:'-points'" class='list-group-item'>
<strong>{{score.name}}</strong> {{score.points}} points
</li>
</ul>
</div>
</body>
</html>
var app = angular.module('app', []);
app.controller('GameController', function($scope, GameService) 
{
var highScores = GameService.getScores();
$scope.scores = highScores;
$scope.submitEntry = function() 
{
if (typeof $scope.name === 'undefined' || typeof $scope.word === 'undefined') 
{
return;
}
var entry = {
name: $scope.name,
word: $scope.word
};
var score = GameService.submitEntry(entry);
var userScore = {
name: entry.name,
points: score
};
if (score > 0)
{
if ($scope.scores.length < 5)
{
$scope.scores.push(userScore);
localStorage.setItem("highScores", JSON.stringify($scope.scores));
return;
}
else
{
for (let i = 0; i < $scope.scores.length; i++) 
{
if (score > $scope.scores[i].points)
{
$scope.scores.splice(i, 1, userScore);
localStorage.setItem("highScores", JSON.stringify($scope.scores));
return;
}
}
}
}
};
});
app.service('GameService', function($http) 
{
this.getScores = function() 
{
var hs = [];
if(localStorage.getItem('highScores') != null)
{
hs = localStorage.getItem('highScores');
if (hs) 
{
hs = JSON.parse(hs);
} 
}
return hs;
};
this.submitEntry = function(entry) 
{
var score = 0;
var revStr = "";
var str = entry.word;
var i = str.length;
for(var j=i; j>=0; j--)
{
revStr = revStr + str.charAt(j);
}
if(str == revStr)
{
alert(str + " is Palindrome");
score = str.length;
}
else
{
alert(str + " is not a Palindrome");
}
return score;
};
});

我删除了这个：

<script src="ng/app.js"></script>`

但我不确定这是否是个问题。

根据您测试代码的方式(stackoverflow、jsfiddle上的代码片段(以及在哪个浏览器上，您可能会遇到同源策略的一些问题。

在chrome上，我必须取消选中"阻止第三方cookie"才能使其工作。在firefox上，它仍然不起作用，操作被阻止，因为浏览器认为它不安全。

我建议您在计算机上本地尝试代码，而不是在jsFiddle等在线沙盒中。

相关内容

最新更新

热门标签：