Как сохранить элементы «Избранное» в локальном хранилище из списка ng-repeat (AngularJS)?

Question

Я пытаюсь создать список с AngularJS, который показывает «Отчеты», которые можно сохранить как «Избранное». Допустим, у меня есть отчеты в формате JSON:

var reports = [
   {
     "ID":1,
     "Title":"Report 1",
     "color":"blue",
     "Favorite": false
   },
   {
     "ID":2,
     "Title":"Report 2",
     "color":"red",
     "Favorite": false
   }
   ...
];
$scope.reports = reports;

Обратите внимание, что есть поле с именем "Избранное", которое всегда ЛОЖНО. В своем HTML-коде я поместил две разные кнопки: кнопка «Избранное» отображается только в том случае, если для параметра «Избранное» установлено значение «ЛОЖЬ», а для параметра «Избранное» отображается значение «ИСТИНА». Я добавил функцию, которая изменяет Favorite на TRUE, когда вы нажимаете кнопку, и Unavorite отчет при повторном нажатии:

<div class="card" dir-paginate="report in reports | filter:filterByRadio | itemsPerPage:4">
  <h3>{{report.Title}}</h3>
  <p>Color: {{report.color}}</p>
  <!-- These are the buttons to Favorite or Unfavorite -->
  <a href="#" title="Add to Favorite" ng-if="report.Favorite == false" ng-click="favoriteReport(report)">
     <i class="material-icons">favorite_border</i> Favorite
  </a>
  <a href="#" title="Unfavorite" ng-if="report.Favorite == true" ng-click="unfavoriteReport(report)">
     <i class="material-icons">favorite</i> Favorited
  </a>
</div>

Функция:

$scope.favoriteReport = function(report) {
  report.Favorite = true;
}
$scope.unfavoriteReport = function(report) {
  if(confirm('Are you sure you want to Unfavorite this Report?')) {
    report.Favorite = false;
  }
}

Поскольку я думаю, что мой код слишком длинный, Я сделал Plunker.

Поэтому мой вопрос: возможно ли сохранить «избранное» как «ИСТИНА» в локальном хранилище. Я скачал ngStorage , но я действительно не знаю, как заставить это работать. Если у кого-то есть лучший подход к решению этой проблемы, любая идея приветствуется.

Answer 1

Было бы разумнее сохранить список идентификаторов, которые были добавлены в избранное:

function favorite(report) {
  report.Favorite = true;
  if($scope.favoriteReports.indexOf(report.ID) === -1) {
    $scope.favoriteReports.push(report.ID);
    $localStorage.favoriteReports = $scope.favoriteReports;
  }
}

function unfavorite(report) {
  var reportIndex = $scope.favoriteReports.indexOf(report.ID);
  if( reportIndex > -1) {
    report.Favorite = false;
    $scope.favoriteReports.splice(reportIndex, 1);
    $localStorage.favoriteReports = $scope.favoriteReports;
  }
}

Когда вы инициализируете свой контроллер, вам нужно будет извлечь список и просмотреть ваши отчеты:

function init() {
  $scope.favoriteReports = $localStorage.favoriteReports || [];
  $scope.reports.each(function(report) {
      if($scope.favoriteReports.indexOf(report.ID) > -1) {
        report.Favorite = true;
      }
  });
}