0

Im new to angular, to the answer for this question might be very straight forward, I just cant seem to find the solution.

I have an angular app with firebase as my backend, my general goal is to have vote card, I set up angular to sync with firebase, and populated firebase with the necessary data.

Each voting card has 4 options, each option paints the card in a different color, the votes are submitted to firebase and the data is consistent (if I refresh the page I can pull the votes from firebase).

What I cant do is to make angular click the button that was selected on page load (and thus painting the card on page load if the user voted on this card)

The angular code

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);

}

The HTML code:

<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>

Thanks for the help!

Aviram Gabay
  • 191
  • 2
  • 15
  • Pull the votes from firebase and call `paintCard` manually should work – Fuzzyma Apr 14 '14 at 13:29
  • but paintCard is called with the event object...does it mean I need to change how it works? – Aviram Gabay Apr 14 '14 at 13:33
  • Jep - you are only using `event.target` which holds the element which was clicked. Your data pulled from the server should have some identifier in it to resolve it to that specifiv button e.g. the id of the button or the whole div. – Fuzzyma Apr 14 '14 at 13:35
  • Thanks for the answer! what do you mean by "call manually" as in outside of the angular controller? – Aviram Gabay Apr 14 '14 at 13:52
  • I think you are doing he request to pull the data insinde the controller, so you have access to the paint-function. I just wrote manually cause you call the function directly and not with the help of a button – Fuzzyma Apr 14 '14 at 13:58
  • the problem is I cant catch the card inside the controller, either I dont know how to capture it the angular way ( I know jQuery well so thats not part of the issue ) or Im trying to catch the card too early, before its rendered... could you please help me on a suggestion on how should the code be written? Thanks! – Aviram Gabay Apr 14 '14 at 14:20
  • 1
    The controller chould come after the link so the element should be there. I think you are kinda missleaded using the events. Entering elements in the controller should be avoided. Try to set a variable in the scope which you then can use in the layout. E.g. `$scope.cardClass = []`. Then you can add classes to the card in the paint-Function using `$scope.cardClass.push('myClass')`. You can use this $scope-variable in your html then maybe with ng-class to change the color. Now you can requesting the votes and just set the classes using the scope – Fuzzyma Apr 14 '14 at 14:27
  • @AviramGabay The question [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background?rq=1) would be helpful for you. Instead of manually calling `.addClass()/.removeClass()` in your controllers, as that is a concern of the view, use a directive like `ng-class` to set the right class. Angular also has built in support for animations as well, so you don't need to call `.animate()` either. If your controller only contains logic, it is much easier to test. – GregL Apr 15 '14 at 02:44
  • Hi guys, thanks for you adivce, I've updated the code accordingly to use ng-class with a variable and setting that variable in the ng-click of the button. Its not working :| , now the cards is not painted even when I click the buttons. can you please tell me why? – Aviram Gabay Apr 16 '14 at 07:40

0 Answers0