Question

我很有棱角，对于这个问题的答案可能非常直接，我似乎无法找到解决方案。

我有一个带有firebase的角应用程序作为我的后端，我的总体目标是拥有投票卡，我设置角度以与firebase同步，并使用必要的数据填充firebase。

每张投票卡有4个选项，每个选项用不同颜色绘制卡片，投票提交给firebase并且数据是一致的（如果我刷新页面，我可以从firebase中提取投票）。

我无法做的是角度点击页面加载时选择的按钮（如果用户在此卡上投票，则在页面加载时绘制卡片）

角度代码

var myApp = angular.module("MyApp", ["firebase"]);

function MyController($scope, $http, $firebase) {
    var questionRef = new Firebase(<my.firebase.link>);
    $scope.questions = $firebase(questionRef);

    $scope.userId = "dave";
    var answerRef = questionRef.child('responses').child($scope.userId);

    var userRef = new Firebase(<another.firebase.link>);

    $scope.selections = {};

    $scope.newQuestion = {
        options: []
    };
//animating the cards to show vote options only on hover
    $scope.showVotes = function(cardId){
        AJS.$("#card"+cardId).animate({height:120}, 200);
    }
    $scope.hideVotes = function(cardId) {
        AJS.$("#card"+cardId).animate({height:75}, 200);
    }
//THE FUNCTION THAT PAINTS THE CARDS ACCORING TO SELECTION
    /*$scope.paintCard = function(event) {
        var card = AJS.$(event.target).parent().parent().parent();
        card.removeClass();
        card.addClass("card-cell "+AJS.$(event.target).data("card"));
    }*/

    $scope.$watch('selections', function () {
        angular.forEach($scope.selections, function (value, key) {
            userRef.child(key).set(true);
            questionRef.child(key).child('responses').child($scope.userId).set(value);
        });
    }, true);

    $scope.$watch('questions', function () {
        var cleanQuestions = angular.fromJson(angular.toJson($scope.questions));
        $scope.selections = {};
        angular.forEach(cleanQuestions, function (question, key) {
        if (!question.responses || !question.responses[$scope.userId]) return;

        var response = question.responses[$scope.userId];
//sets up a default value on page load if exists, works with radio buttons but not with buttons
        $scope.selections[key] = response;

        });
    }, true);

}

HTML代码：

<div ng-app="MyApp" ng-controller="MyController">
            <div id="card{{questionKey}}" ng-class="cardColor" class="card-cell" ng-repeat="(questionKey, question) in questions" ng-mouseenter="showVotes(questionKey)" ng-mouseleave="hideVotes(questionKey)">
                <div class="card">
                    <h4><span ng-bind="question.title"></span></h4>
                    <div class="description"><span ng-bind="question.desc"></span></div>
                    <div class="aui-buttons votes">
                        <button class="aui-button vote-{{option.text}}" ng-value="key" ng-click="cardColor='card-option.text'" ng-model="selections[questionKey]" ng-repeat="(key, option) in question.options">{{option.text}}</button>
                    </div>
                </div>
            </div>
        </div>

感谢您的帮助！

如何在使用Angularjs加载页面后单击按钮

0 个答案: