Question

我有以下角度控制器：

application.controller('ImageController', function ImageController($scope, ImageService) {

  $scope.model = {
    images: []
  }

  var list = function () {
    ImageService.GetList()
     .success(function (data, status, headers, config) {
       $scope.model.images = $scope.model.images.concat(data.Images)
     })
     .error(function (data, status, headers, config) { });
  }

  $scope.vote = function (image) {
    ImageService.Vote(image)
      .success(function (data, status, headers, config) { })
      .error(function (data, status, headers, config) { });
  };

  list();

});

该服务返回图像列表，如下所示：

{"Images": [
  {"Key":"22","Url":"http://www.domain.com/i/img22.jpg", "Votes": 120},
  {"Key":"88","Url":"http://www.domain.com/i/img88.jpg", "Votes": 428}
]}

我显示一个图像列表，每个图像都有一个投票按钮和投票数。

<div data-ng-repeat='image in model.images'>
  <img data-ng-src="{{image.Url}}" alt="" />
  <a href="" data-ng-click="vote(image)">VOTE</a>
  <span>{{image.Votes}}</span>
</div>

当用户投票图像时，我想禁用投票按钮，即使只针对此页面请求，也要将投票数增加一个。

PLAN

我的想法是添加一个属性＆＃34; HasBeenVoted＆＃34;从服务加载后，每个图像都为False，当图像被投票时，将其更改为true并将其投票增加1。当然，与HTML同步以禁用投票按钮并更新{{image.Votes}}

问题

如何在所有图片中包含HasBeenVoted：

$ scope.model.images = $ scope.model.images.concat（data.Images）
如何在模型和HTML中更新HasBeenVoted和Votes Number：

$ scope.vote = function（image）{ ImageService.Vote（图） .success（function（data，status，headers，config）{}） .error（function（data，status，headers，config）{}）; };

有人可以帮我解决这个问题吗？

Answer 1

如果您不需要检查服务器端，则可以按如下方式更改JS / HTML：

HTML

<div data-ng-repeat='image in model.images'>
  <img data-ng-src="{{image.Url}}" alt="" />
  <a ng-disabled="image.HasBeenVoted" href="" data-ng-click="vote(image)">VOTE</a>
  <span>{{image.Votes}}</span>
</div>

的Javascript

 $scope.vote = function (image) {
    image.HasBeenVoted = true;
    image.Votes += 1;
    ImageService.Vote(image)
      .success(function (data, status, headers, config) { })
      .error(function (data, status, headers, config) { });
  };

这是有效的，因为image.HasBeenVoted最初将为false，对于您投票的每个图像都为true。

但如果您导航，这不会持续存在。我建议你扩展服务来处理这个服务器端。您的服务器应对此负责。您的响应应该具有已登录用户的属性HasBeenVoted。

编辑：您可以在控制器中进行检查，更改HTML + JS，如下所示：

CSS

.disabled {
    opacity: .2;
}

HTML

<div data-ng-repeat='image in model.images'>
  <img data-ng-src="{{image.Url}}" alt="" />
  <a ng-class="{disabled: image.HasBeenVoted}" href="" data-ng-click="vote(image)">VOTE</a>
  <span>{{image.Votes}}</span>
</div>

JS

 $scope.vote = function (image) {
    if (image.HasBeenVoted) { return; }

    image.HasBeenVoted = true;
    image.Votes += 1;
    ImageService.Vote(image)
      .success(function (data, status, headers, config) { })
      .error(function (data, status, headers, config) { });
  };

用户操作后更新模型和HTML

1 个答案: