Question

嘿伙计们我可以知道如何在angularjs中创建上/下投票功能？我想使它类似于stackoverflow或reddit。我找到了一个Jquery插件https://github.com/janosgyerik/jquery-upvote来做我想要的但是它在Jquery中。

我已经尝试了几种方法来做到这一点，但我仍然无法让它运作良好。这是我的方法。

HTML

<a class="green" ng-click="isUpVoted = !isUpVoted"  ng-style="afterVoteUp" href=""> <i title="Up Votes" class="fa fa-arrow-circle-up fa-2x"></i></a>

<a class="maroon" ng-click="isDownVoted = !isDownVoted" ng-style="afterVoteDown" href="" > <i title="Down Votes" class="fa fa-arrow-circle-down fa-2x "></i></a>

控制器

$scope.isUpVoted = false;
    $scope.$watch("isUpVoted",function(newVal, oldVal){
    if(newVal != oldVal){
        if(newVal){
           // first click
           // upvote

        }else{
           // second click 
           // remove upvote
        }

        }
});

$scope.isDownVoted = false;
        $scope.$watch("isDownVoted",function(newVal, oldVal){
        if(newVal != oldVal){
            if(newVal){
               // first click
               // downvote

            }else{
               // second click 
               // remove downvote
            }

            }
    });

对于一个按钮完全正常工作，但我仍然无法弄清楚如何使这两个按钮一起工作，例如当用户点击upvote downvote将取消或反之亦然并再次点击upvote取消投票。

Answer 1

只需使用一个范围变量就像切换按钮一样。

示例演示： http://plnkr.co/edit/C4w9hDK3xW1R0ua3WPgU?p=preview

<强> HTML：

<body ng-controller="MainCtrl">
  <i title="Up Votes" ng-click="changeVote(vote, 'up')" class="fa fa-arrow-circle-up fa-2x" ng-class="{true:'up', false:''}[vote=='up']"></i>
  <br>
  <i title="Down Votes" ng-click="changeVote(vote, 'down')" class="fa fa-arrow-circle-down fa-2x"  ng-class="{true:'down', false:''}[vote=='down']"></i>
  <br>Vote: {{vote}}

控制器逻辑：

app.controller('MainCtrl', function($scope) {
  $scope.changeVote = function(vote, flag) {
    $scope.vote = vote == flag ? 'None' : flag;
    alert($scope.vote);
  };
});

Answer 2

制作这样的东西应该很简单。
这是一个简单的例子：

JS：

var app = angular.module('voteApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.upVote = function () {
        $scope.vote++;
    }

    $scope.downVote = function () {
        $scope.vote--;
    }

    $scope.vote = 0;
});

Fiddle

如何在angularjs中创建上/下投票功能

2 个答案: