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;

请注意，有一个名为“收藏夹”的字段始终为FALSE。在我的HTML中，我放置了两个不同的按钮：仅在“收藏夹”设置为FALSE时才显示“收藏夹”按钮，而在将其设置为TRUE时显示“不喜欢”按钮。我添加了一个函数，当您单击按钮时将“收藏夹”更改为TRUE，而再次单击时将“收藏夹”更改为：

<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;
  }
}

我认为我的代码太长了，I've made a Plunker.

所以我的问题是，是否可以在本地存储中将“收藏夹”保持为TRUE。我下载了 ngStorage ，但我真的不知道如何使它工作。如果有人对如何解决此问题有更好的方法，那么任何想法都会受到赞赏。

Answer 1

保存已收藏的ID列表会更有意义：

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;
      }
  });
}

如何从ng-repeat列表（AngularJS）将“收藏夹”项存储在本地存储中？

1 个答案: