Угловой массив localstorage не отображается в HTML

Я сохраняю список из 5 лучших результатов в массиве в localstorage, но когда я пытаюсь показать его в моем 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>

любые ошибки в консоли

— 13.12.2018 15:15

Ошибок в консоли нет

— 13.12.2018 15:17

распечатайте scores в шаблоне, например {{scores}}

— 13.12.2018 15:18

Кажется, работает, вы просто плохо сортируете данные

— 13.12.2018 15:18

Спасибо, Зоули, что ты имеешь в виду под сортировкой данных?

— 13.12.2018 15:21

Есть большая разница между angular и angularjs. Это две разные структуры. Вы используете angularjs и правильно отметили его, но неправильно назвали его в заголовке и в вопросе.

— 13.12.2018 15:33

Почему вы закрываете комментарий (</ul-->), а нигде не открываете?

— 13.12.2018 15:43

Просто оставил закрывающий комментарий предыдущей модификации. Спасибо за внимание

— 13.12.2018 15:50

Вы должны удалить значение в ng-app = "app". Это только ng-app

— 13.12.2018 15:58

javascript angularjs node.js

13.12.2018 15:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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, jsfiddle) и в каком браузере, вы можете столкнуться с некоторыми проблемами с политикой того же происхождения.

В Chrome мне пришлось снять флажок «Блокировать сторонние файлы cookie», чтобы он работал. В firefox он все еще не работает, операция заблокирована, потому что браузер считает ее небезопасной.

Я предлагаю вам попробовать код локально на вашем компьютере, а не в онлайн-песочницах, таких как jsFiddle.

13.12.2018 17:11