Angular JS storeはページセッションで好きです

Question

ニュースアイテムのリストをAngularで印刷していて、各ニュースアイテムに好き嫌いのボタンがあります。 Angularでは、項目ごとのページセッションに好き嫌いを保存できる方法がありますか？私はこれにどのようなアプローチをとることができますか？

JS：

'use strict'; 

// Declare app level module which depends on views, and components 
angular.module('newsFeed', [ 
    'ngRoute', 
    'newsfeedapp.view1', 
    'newsfeedapp.view2', 
    'newsfeedapp.version', 
    'newsFeed', ['angular.filter'] 

]). 
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 
}]); 

/* Newsfeed API Call */ 
var app = angular.module('newsFeed', []) 
    .controller('Newsfeed', function($scope, $http) { 
     $http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=6ddf8d3cc8a54cc0abf89ad7d685da54'). 
     then(function(response) { 
      $scope.news = response.data; 
      console.log(response.data.articles); 

     }); 
    }); 

HTML：

<div class="container" ng-controller="Newsfeed"> 
    <br/> 
    <form> 
    <div class="col-md-6"> 
     <h2>Newsfeed</h2> 
     <br/> 
     <div class="form-group"> 
     <input type="text" class="form-control" ng-model="searchText" name="search-news" id="search-news" placeholder="Search for news"> 
     </div> 
    </div> 
    </form> 


    <div> 
    <div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:selectedAuthor"> 
     <img class="card-img-top img-responsive" src="{{n.urlToImage}}" alt="Card image cap"> 
     <div class="card-block"> 
     <h4 class="card-title"><a href="" ng-click="view($index)">{{n.title | cut:true:50:' ...'}}</a></h4> 
     <p class="card-text"> {{n.author}} <small>on {{ formatDate(n.publishedAt) | date:'dd/MM/yyyy'}}</small> </p> 
     <p class="card-text"> {{n.description | cut:true:100:' ...'}}</p> 

     // here are my like and dislike buttons 
     <a class="btn btn-primary" href="#" role="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a> 
     <a class="btn btn-danger" href="#" role="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

実際、@Jorgeオブレゴンが言うように、あなたは完全にそれを行うことができlocalStorageで。それを使用すると、ブラウザのストレージにjsonとしてデータを保存し、後で非常に簡単に取得できます。

Answer 2

このServiceを見ると、localStorageデータを扱うことができます（LoDashが必要です）。

(function() { 
 
    'use strict'; 
 
    angular.module('app') 
 
    .service('StorageSrv', ['$rootScope', function ($rootScope) { 
 
    var self = this, 
 
    prefix = 'app_name', 
 
    ls = window.localStorage; 
 

 
    self.set = function (key, val) { 
 
     var obj = JSON.parse(ls.getItem(prefix)) || {}; 
 
     _.set(obj, key, val); 
 
     ls.setItem(prefix, JSON.stringify(obj)); 
 
    }; 
 

 
    self.get = function (keyPath) { 
 
     if (!keyPath || !_.size(keyPath)) 
 
     return JSON.parse(ls.getItem(prefix)); 
 
     else 
 
     return _.get(JSON.parse(ls.getItem(prefix)), keyPath, null); 
 
    }; 
 

 
    self.delete = function (keyPath) { 
 
     var obj = JSON.parse(ls.getItem(prefix)) || {}; 
 
     _.unset(obj, keyPath); 
 
     ls.setItem(prefix, JSON.stringify(obj)); 
 
    }; 
 
    
 
    }]) 
 
})();

そして、あなたが好きそれを使用します。

StorageSrv.set('my_key', 123);

そして

StorageSrv.get('my_key'); // 123

そして

StorageSrv.delete('my_key');