Question

我正试图建立一个简单的上下投票系统来进行竞选：

JSON： 这是我简化的JSON字符串。它包含广告系列及其所有上下投票。

    {
        "Campaign": {
            "id": "106",
            "code": "ENDUS15-2RX2Y",
            "start": "2016-02-29 23:00:00",
            "end": "2016-03-31 22:00:00",
            "votes": 4
        },
        "CampaignVote": [
            {
                "id": "259",
                "vote_score": "1",
                "user_id": "26"
            },
            {
                "id": "261",
                "vote_score": "1",
                "user_id": "10"
            },
            {
                "id": "268",
                "vote_score": "1",
                "user_id": "34"
            },
            {
                "id": "270",
                "vote_score": "-1",
                "user_id": "41"
            }
        ]
    }

controller.js： 在控制器中，我正在检索广告系列，并且还设置了登录用户的ID。

  $scope.my_user_id = 10;

  $http.post($scope.connection + "/campaigns/all.json")
  .success(function(data, status, headers, config) {
      $scope.deals = data.deals;
  })

HTML： 在我的HTML页面上，当用户投票时，我正在显示绿色向上箭头。用户低估时的红色箭头。

或

<span ng-repeat="vote in deal.CampaignVote">
   <button class="icon ion-chevron-up icon-up" ng-class="{'icon-up-selected': vote.user_id == my_user_id && vote.vote_score == 1 }" ng-click="upvote(deal.Campaign.id);" ng-disabled="vote.user_id == my_user_id"></button>
</span>

<span ng-show="deal.CampaignVote.length == 0">
   <button class="icon ion-chevron-up icon-up" ng-click="upvote(deal.Campaign.id);"></button>
</span>

<span class="deals-points">{{deal.Campaign.votes}}</span>
<span ng-show="deal.Campaign.votes == null" class="deals-points">0</span>

<span ng-repeat="vote in deal.CampaignVote">
   <button class="icon ion-chevron-down icon-down" ng-class="{'icon-down-selected': vote.user_id == my_user_id && vote.vote_score == -1 }" ng-click="downvote(deal.Campaign.id);" ng-disabled="vote.user_id == my_user_id"></button>
</span>

<span ng-show="deal.CampaignVote.length == 0">
   <button class="icon ion-chevron-down icon-down" ng-click="downvote(deal.Campaign.id);"></button>
</span>

我的问题是这种方法并不总是有效。我目前正在循环所有选票。有没有办法说＆＃34;如果登录用户赞成该广告系列，请将其设为绿色＆＃34;？

Answer 1

这有帮助吗？ Plunker

JS

  $scope.Campaign = {
    "id": "106",
    "code": "ENDUS15-2RX2Y",
    "start": "2016-02-29 23:00:00",
    "end": "2016-03-31 22:00:00",
    "votes": 0,
    "up_votes": 0,
    "down_votes": 0,
    "CampaignVote": [
      {
        "id": "259",
        "vote_score": "1",
        "user_id": "26"
      },
      {
        "id": "261",
        "vote_score": "1",
        "user_id": "10"
      },
      {
        "id": "268",
        "vote_score": "1",
        "user_id": "34"
      },
      {
        "id": "270",
        "vote_score": "-1",
        "user_id": "41"
      }    
    ]
  }

  for (var i = 0; i < $scope.Campaign.CampaignVote.length; i += 1) {
    if (parseInt($scope.Campaign.CampaignVote[i].vote_score) === 1) {
     $scope.Campaign.up_votes += 1;
    }
    else if (parseInt($scope.Campaign.CampaignVote[i].vote_score) === -1) {
     $scope.Campaign.down_votes += 1;
    }
  }


  $scope.vote = function (value) {
    $scope.Campaign.CampaignVote.push({
      "id": $scope.Campaign.CampaignVote.length + 1,
      "vote_score": value,
      "user_id": $scope.Campaign.CampaignVote.length + 1
    });

    if (value === 1) {
     $scope.Campaign.up_votes += 1;
    }
    else if (value === -1) {
     $scope.Campaign.down_votes += 1;
    }
  }

标记

  <body ng-controller="MainCtrl">
    <div style="text-align:center; width:20px; position:absolute; top:10px; left:10px">
      <div style="width:100%; height:10px; background:green;"></div>
      <p>{{Campaign.up_votes}}</p>
      <div style="width:100%; height:10px; background:black;"></div>
    </div>
    <br>
    <div style="text-align:center; width:20px; position:absolute; top:10px; left:60px">
      <div style="width:100%; height:10px; background:black;"></div>
      <p>{{Campaign.down_votes}}</p>
      <div style="width:100%; height:10px; background:red;"></div>
    </div>
    <br>
    <div style="position:absolute; top:100px;">
      <button ng-click="vote(1)">Up</button>
      <button ng-click="vote(-1)">Down</button>
    </div>
  </body>

使用AngularJS的up / downvote系统问题

1 个答案: