Question

我正在尝试创建一个保存/取消链接，就像你在Reddit页面上找到的那样。

所需行为

列出了对象（故事）。如果对象尚未保存，则每个对象都包含一个名为“save”的链接，如果已保存该对象，则包含“unsave”。基本上，它是一个典型的“最喜欢的”按钮，除了指示符是一个单词，而不是心脏图标或任何类似的东西。当用户点击“保存”时，“保存”一词会变为“未保存”，反之亦然。

到目前为止我有什么

var app = angular.module('feed', ['angularMoment'])

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}])


.factory('Stories',function($http, moment){
  return {
    load: function(){
      return $http.get('axeapi/stories/popular/').
          success(function(data, status, headers, config) {
            return data.results;
            // console.log(data);
          }).
          error(function(data, status, headers, config) {
            console.log("Poop");
        });
    }, // end load

    save: function(story) {
        var fav_link = "story/" + story + "/favorite/";
        var csrftoken = $.cookie('csrftoken');

        // alert(csrftoken);
        $http.post(fav_link, {'csrfmiddlewaretoken': csrftoken }).
              success(function(data, status, headers, config) {
                console.log("saved");
                story.saved = true;
              }).
              error(function(data, status, headers, config) {
                alert(data);
              });

        story.saved = true;
    } // end save

    unsave: function(story) { 
      // http POST; 'unfavorite' requst
      // return story.saved = false;
    }
  }
})

.controller("PostController", function($scope, moment, Stories) {
    $scope.saved_status = "save";
    $scope.foo = {
      bar: 'world'
    };

    Stories.load().then(function(stories){
      console.log(stories)
      $scope.stories = stories.data.results;
    });

    $scope.saveStory = function(story){
      Stories.save(story);
      $scope.saved_status = "unsave"
    }
});

的index.html

<div class="container" data-ng-controller="PostController">
    <div class="row row-centered" data-ng-repeat="story in stories">
        <div class="col-xs-8 text-left">
            <div class="post-title"><h4><a href="/story/{{ story.id }}/">{{story.title}}</a></h4></div>

            <a class="post-links save-story" data-story-id="{{ story.id }}" ng-click="saveStory(story.id)">{{ saved_status }}</a>
         </div>
       </div>
    </div>
</div>

当前行为

当我点击“保存”时，所有“保存”都会变为“保存”。每当我点击“保存”时，我都不知道如何将操作切换为对我开始编写的工厂中编写的unsave的调用。

Answer 1

每个故事都需要自己的saved_status。现在你每个控制器有一个，而不是每个故事一个。把它改成这个，你应该没问题：

<强>更新刚刚注意到您在点击中只发送了帖子的id。发送整个对象，这将更容易使用。

<!-- html -->
<div data-ng-repeat="story in stories">
  <a ng-click="saveStory(story)">{{ story.saved_status }}</a>
</div>

.controller('PostController', function($scope, moment, Stories) {
  Stories.load().then(function(stories){
    $scope.stories = stories.data.results
    // this can be done differently, but as an example this is what you need
    angular.forEach($scope.stories, function (story) {
      story.saved_status = story.saved // if saved, say unsave and vice versa
        ? 'Unsave'
        : 'Save'
    })
  })

  $scope.saveStory = function(story) {
    var savedStatus = story.saved_status
    // if the button said 'Save', call Stories.save(), otherwise do opposite
    if (savedStatus === 'Save') {
      Stories.save(story.id) // send id
      story.saved_status = 'Unsave'
    }
    else {
      Stories.unsave(story.id) // send id
      story.saved_status = 'Save'
    }
  }
})

如何使用Angular和两个POST请求创建保存/取消保存切换按钮？

1 个答案: