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

看一下这个Service来处理localStorage数据（它需要LoDash）。

＆＃13;

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

＆＃13;

你会像以下一样使用它：

StorageSrv.set('my_key', 123);

和

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

并且

StorageSrv.delete('my_key');

Angular JS商店喜欢页面会话

1 个答案: