0

我正在尝试使用 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;

请注意，有一个名为“Favorite”的字段始终为 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;
  }
}

因为我觉得我的代码有点太长了，所以我做了一个 Plunker。

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

4

1 回答 1

0

保存已收藏的 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;
      }
  });
}
于 2019-01-07T21:00:35.607 回答