Question

我正在尝试使用AngularJS和Ionic Framework创建一个投票系统。我正在使用ng-repeat来循环来自JSON数组的一系列用户帖子。每个帖子都有一个upvote和一个downvote按钮。选择一个后，我禁用该帖子上的按钮。我目前遇到的问题是无论用户是否重新打开应用程序，都会禁用该按钮。我的目标是防止多方投票。目前，我正在使用此方法在单击按钮后禁用该按钮：

<button class="button button-small button-light" ng-click="upThread({{thread.id}})" ng-disabled="upDisabled[thread.id]">  
  <i class="icon ion-thumbsup"></i>
</button>
<button class="button button-small button-light" ng-click="downThread({{thread.id}})" ng-disabled="downDisabled[thread.id]">
  <i class="icon ion-thumbsdown"></i>
</button>


$scope.upDisabled = {};
$scope.downDisabled = {};

$scope.upThread = function(id) {
    ...
    $scope.upDisabled[id] = true;
    $scope.downDisabled[id] = false;
}

$scope.downThread = function(id) {
    ...
    $scope.downDisabled[id] = true;
    $scope.upDisabled[id] = false;
}`

这非常适合禁用按钮。现在，问题是，我要求控制器的Cache为false，否则我的新帖子在添加时不会在视图中更新。这意味着，当重新加载应用程序或在路由/视图之间切换时，按钮会再次启用，这不是我想要的。此外，将缓存设置为true并不会在重新打开应用程序后禁用按钮。我尝试使用localstorage来存储$ scope.upDisabled和$ scope.downDisabled，但它会破坏JSON格式。我尝试过远程存储并收到相同的结果。例如，$ scope.upDisabled和$ scope.downDisabled存储数据如下：

{“2”：true，“3”：false，“4”：true}

等等。但是因为存储在localstorage或数据库中需要我使用JSON.stringify，你可以猜测这些引用会带来麻烦，我最终也会使用嵌套的JSON。因此，来自localstorage的数据不会返回正确的格式。我已知的问题/选择是双重的。

是否有更好的解决方案来持续禁用它们纽扣？
我如何正确格式化出来的JSON localStorage的？

需要注意的其他事项：由于这是使用Ionic的移动/混合应用程序，我不使用cookie，但我确实创建了一个令牌系统来表现相似。

编辑：感谢那些回复的人和您的建议。我目前正在使用MySQL数据库来跟踪投票（可能会在以后切换到SQLite）@aorfevre：我之前看过SQLite插件，可能会在未来使用它。我终于把一切都搞定了。

$scope.upDisabled = {};
$scope.downDisabled = {};
$scope.upCheck = {};
$scope.downCheck = {};

...Votes Loading function up here
...Thread loading Function up here
.finally(function(){
angular.forEach($scope.threads,function(value,index){
    angular.forEach($scope.upCheck,function(value2,index){
        if(value.id == value2.threadID)
        {
            $scope.upDisabled[value.id] = true;
            $scope.downDisabled[value.id] = false;
        }
    })
})

angular.forEach($scope.threads,function(value,index){
    angular.forEach($scope.downCheck,function(value2,index){
        if(value.id == value2.threadID)
        {
            $scope.downDisabled[value.id] = true;
            $scope.upDisabled[value.id] = false;
        }
    })
})
}
$scope.loadVotes();
$scope.loadThreads();

至于服务器端（使用Laravel Framework的PHP）：

public function upvoteThread($id, $token)
{
    $thread = Thread::find($id);
    $score = $thread->score;
    $score = $score + 1;
    $thread->score = $score;
    $thread->save();

    $voted = ThreadVote::where('threadID','=',$id)->where('token','=',$token)->get();

    if($voted->isEmpty())
    {
        $upVote = new ThreadVote;
        $upVote->threadID = $id;
        $upVote->token = $token;
        $upVote->upVote = 'true';
        $upVote->downVote = 'false';
        $upVote->save();
    } 
    else 
    {
        DB::table('thread_votes')
            ->where('threadID', '=', $id)
            ->where('token','=',$token)
            ->update(array('upVote' => 'true', 'downVote' => 'false')
        );
    }

    return Response::json(array('status'=>1))->setCallback(Input::get('callback'));
}

public function getUpVotes($token)
{
    $votes = ThreadVote::where('token','=',$token)
    ->where('upVote','=','true')
    ->select('threadID','upVote')
    ->get();

    return Response::json($votes)->setCallback(Input::get('callback'));
}

...Similar downVote Function...

就目前而言。按下按钮时，它会保存用户的令牌，threadID并投票到数据库。加载视图时，基于token和threadID的信息作为JSON数组加载，与Thread数组相关联，如果threadID和thread.id匹配，则将其作为“threadID”推入up / downdisabled作用域： bool（“1”：例如）。

Answer 1

如果您管理大量帖子，我建议您实施数据库。

我个人使用localStorage作为几个首选项而不是存储数据库。

因此，如果你只针对ios / android，我建议你https://github.com/litehelpers/Cordova-sqlite-storage

如果您的目标是Windows Phone 8.1，那么实施并非易事，而且我还面临一些与WindowsPhone和Windows的结构有关的问题。 C ++编译librairy（更多详细信息：https://issues.apache.org/jira/browse/CB-8866）

AngularJS投票系统 - 防止多票

1 个答案: