허용 안 여러 표

내가 이미지 목록을 표시하고 수 있도록 다음과 같은 각도와 HTML 코드가 투표 :허용 안 여러 표

<script type="text/javascript"> 

    var application = angular.module('Application', []); 

    application.service('ImageService', function ($http) { 

    return { 

     GetList: function (page) { 
     return $http.get('api/images', { params: { page: page } }); 
     }, 

     Vote: function (image) { 
     return $http.post('api/images/{key}/vote', { key: image.Key }); 
     } 

    } 

    }); 

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

    var page = 0; 
    $scope.images = []; 

    ImageService.GetList(page) 
     .success(function (data, status, headers, config) { 
     $scope.images = $scope.images.concat(data); 
     }) 
     .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) { }); 
    }; 

    }); 

</script> 

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery"> 
    <div data-ng-repeat='image in images' class="image"> 
    <img src="{{image.Url}}" alt="" /> 
    <a href="" data-ng-click="vote(image)"><i class="icon-heart"></i></a> 
    <span>{{image.Votes}}</span> 
    </div>  
</div>

각각의 이미지는 고유 ID, image.Id있다.

사용자가 동일한 이미지를 두 번 투표하도록 허용하지 않으려면 어떻게해야합니까? 투표로

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

단순히 이미지를 플래그 :

출처

2015-01-07 Miguel Moura

백엔드에서이를 막는 유일한 방법은 방지하는 것입니다. –

네, 물론입니다. 그러나이 경우 사용자가 서로 다른 두 가지 요청에서 두 번 투표 할 수도 있다는 사실에 신경 쓰지 않습니다. 나는 단지 사용자가 동일한 요청으로 투표를 거부하고 싶습니다. 대부분의 경우 이미지가 항상 달라지기 때문에 –

이 질문에서 분명하지 않습니다. –

클라이언트 측에 간단한 팅겨은 다음과 같이 될 것이다.

출처

2015-01-07 12:15:20 Shomz

ng-hide를 사용하면 hasVoted가 true 인 경우 링크를 숨길 수 있습니다.

<div class="gallery"> 
    <div data-ng-repeat='image in images' class="image"> 
    <img src="{{image.Url}}" alt="" /> 
    <a href="" data-ng-hide="image.hasVoted" data-ng-click="vote(image)"><i class="icon-heart"></i></a> 
    <span>{{image.Votes}}</span> 
    </div>  
</div>

그런 다음 컨트롤러를 수정하여 투표됨을 true로 설정하십시오. 실패하면 false로 다시 설정합니다. 그 이유는 서버에서 성공을 얻을 때까지 버튼을 여러 번 클릭하는 것을 방지하기 위해서입니다.

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

출처

2015-01-07 12:17:24

허용 안 여러 표

답변

관련 문제