Question

我有一个民意调查申请，其中用户可以在给定民意调查中投票选项。在html模板中，我使用ng-show来显示用户投票选择此选项或此投票的天气，或者是否为用户投了一个未投票的投票：

<div data-ng-repeat="option in poll.poll_options" class="list-group-item">

    <span data-ng-if="option.option_thumb == '2'" class="glyphicon glyphicon-thumbs-up"></span>
    <span data-ng-if="option.option_thumb == '1'" class="glyphicon glyphicon-thumbs-down"></span>

    <div data-ng-show="optionVoted(option,authentication.user._id)">
            <span data-ng-bind="option.option_text"></span>
    </div>
    <div data-ng-hide="optionVoted(option,authentication.user._id)">
        <div data-ng-show="pollVoted(poll._id,votes)">
            <a data-ng-click="updateVote()">
                <span data-ng-bind="option.option_text"></span> - update
            </a>
        </div>
        <div data-ng-hide="pollVoted(poll._id,votes)">
            <a data-ng-click="createVote(poll,option,authentication.user._id,$index)">
                <span data-ng-bind="option.option_text"></span> - new
            </a>
        </div>
    </div>

    <span class="option-votes"> - {{option.votes.length}}</span>

</div>

以上提到的函数用于确定选项/民意调查是否已由用户投票：

// check if option is voted
    $scope.optionVoted = function(option,userId){
        for (var i = 0; i < option.votes.length; i++){
            if (option.votes[i].user === userId){
                return true;
            }
        }
};

//check if poll is voted
$scope.pollVoted = function(pollId,votes){
    for (var i = 0; i < votes.length; i++){
        if (votes[i].poll === pollId){
            return true;
        }
    }
}

这是创建新投票的功能：

// create a vote
$scope.createVote = function(poll,option,userId,index){

    var vote = new Votes({
        user:userId,
        poll:poll._id,
        poll_option:option._id
    });

    vote.poll_option_id = option._id;
    vote.$save(function(vote){
        option.votes.push(vote);
        $scope.$apply();
    }, function(errorResponse) {
        $scope.error = errorResponse.data.message;
    });
 }

前端发生的事情是，现在已经投票的选项已更新（不再显示标签）。我需要的是，民意调查中的其他选项也会更新，而现在而不是create()他们将显示update()，而不刷新页面。

如何在poll中更新其他html DOM元素？

Answer 1

在html中，用对象属性替换ng-show中的函数：

ng-show =＆＃34; option.voted＆＃34;，例如。

并在createVote函数中更新option.voted。

（使用userId等进行修改）

Answer 2

确保将新投票推送到范围内的正确对象。您似乎在视图中显示来自$scope.poll.poll_options的数据，但您在options.votes函数中添加createVote。

Angular.js在更新范围后运行ng-show函数

2 个答案: