javascript - How to click a button after page load with Angularjs -
im new angular, answer question might straight forward, cant seem find solution.
i have angular app firebase backend, general goal have vote card, set angular sync firebase, , populated firebase necessary data.
each voting card has 4 options, each option paints card in different color, votes submitted firebase , data consistent (if refresh page can pull votes firebase).
what cant make angular click button selected on page load (and painting card on page load if user voted on 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 cards show vote options 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 paints cards accoring 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 default value on page load if exists, works radio buttons not 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 help!
Comments
Post a Comment