javascript - AngularJS: Checking the radio button and added a new partial at the end -
i have been using angularjs while now. have radio button gives users option , json data has value of correct answers. want check number of correct answers user has provided(after user clicks 'submit button') , display @ end of test. how achieve it?
controllers.js
var testcontrollers = angular.module('testcontrollers', []); testcontrollers.controller('ansacontroller', ['$scope', function($scope) { $scope.check = function check(){ alert("he"); }; }]); testcontrollers.controller('listcontroller', ['$scope', '$http', function($scope, $http) { $http.get('js/data.json').success(function(data) { $scope.questions = data; $scope.artistorder = 'name'; }); }]); testcontrollers.controller('detailscontroller', ['$scope', '$http','$routeparams' ,function($scope, $http, $routeparams) { $http.get('js/data.json').success(function(data) { $scope.questions = data; $scope.whichitem = $routeparams.itemid; $scope.parseint = parseint; if($routeparams.itemid > 0){ $scope.previtem = number($routeparams.itemid) - 1; } else{ $scope.previtem = $scope.questions.length - 1; } if($routeparams.itemid < $scope.questions.length-1){ $scope.nextitem = number($routeparams.itemid) + 1; } else{ $scope.nextitem = 0; } }); }]);
json data:
[{ "pos": "a", "val": "3" }, { "pos": "b", "val": "6" }, { "pos": "c", "val": "9" }, { "pos": "d", "val": "0" }, { "answer": "b" }]
html:
<link rel="stylesheet" href="css/common.css" /> <section class="artistinfo" ng-controller = "ansacontroller"> <div class="mcq" ng-model = "questions"> <center><a href = "#details/{{previtem}}" class = "button">prev</a> <a href = "#details/{{nextitem}}" class = "button">next</a></center> <div class = "qanda"> <h3 class = "qnum">question {{parseint(whichitem)+1}}</h3> <p class = "ques" math-jax-bind = "questions[whichitem].ques"></p> <ul ng-show = "tab!= 1 || selopt==null"> <li class= "optlist" ng-repeat="item in questions[whichitem].opts"> <label class="formgroup"> <input type="radio" name = "q" ng-model = "$parent.selopt" value = "{{item.pos}}"><span math-jax-bind = "item.val"></span> </label> </li> <center><button class = "button" ng-click = "tab = 1" ng-click = "check();"></button></center> </ul> <div ng-show = "selopt !=null"> <p class = "ques" ng-show = "tab === 1">your answer has been recorded! </p> </div> <p class = "ques">you've chosen: {{selopt}}</p> </div> <center><a href = "#list" class = "button">list view</a></center> </div> </section>
Comments
Post a Comment