角度本地存储数组未显示在 HTML 上答案

【问题标题】：Angular localstorage array not showing on HTML角度本地存储数组未显示在 HTML 上
【发布时间】：2018-12-14 00:11:35
【问题描述】：

我正在本地存储中的数组中保存前 5 个高分的列表，但是当我尝试在我的 HTML 中显示它时，它没有出现。

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

我是 Angular 和 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>

【问题讨论】：

控制台中的任何错误
控制台没有错误
在模板中打印scores，如{{scores}}
似乎工作，你只是不好的数据排序
谢谢 Zooly，你对数据进行排序是什么意思？

标签： javascript angularjs node.js

【解决方案1】：

您的代码实际上正在运行：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 上的代码 sn-p、jsfiddle）以及在哪个浏览器上，您可能会遇到一些同源策略问题。

在 chrome 上，我必须取消选中“阻止第三方 cookie”才能使其正常工作。在 Firefox 上它仍然无法工作，该操作被阻止，因为浏览器认为它不安全。

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

【讨论】：