问题最多，并与AngularJS

我想建立一个简单的上下投票系统campaings downvote系统：问题最多，并与AngularJS

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页面，我显示一个绿色的向上箭头时campaing是由用户upvotes。用户下拨时的红色向下箭头。

或

<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>

我的问题是，这种方法并不总是有效。我目前正在循环所有选票。有没有办法说“如果登录的用户向上投票的活动，使其绿色”？

来源

2016-03-05 doonot

你真的应该把逻辑控制器。不要尝试在视图中处理整个阵列。也许有数量和'userVote'的范围变量'totalScore'，它是-1,0或1.然后应该很容易在视图中绑定事物。 –

这有帮助吗？ Plunker

$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>

来源

2016-03-05 15:43:46

问题最多，并与AngularJS

回答

相关问题