Respond to radio buttons clicks in AngularJS

Hello, I’m learning AngularJS with an online course and I have to do an exercise (not to present it to anybody but for my learning).
I’ve already figured out several things but I’m stuck with some.
The one that I’m not able to figure is how to handle the user response on a radio button click.

The exercise is about presenting several questions to the user and to show how many right answers she made.

I need to make the AngularJS script to serve some HTML that was previously provided. So I guess I should not modify it.
They didn’t say from where to get the questions and answers but I made a Json file for that purpose.

The file is ready to be run here https://www.balkesoft.com/test/
(preguntas.html)

This is the HTML:

<!DOCTYPE HTML>
<html ng-app="EncuestaApp">
<head>    
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Cuestionario con AngularJS</title>
	<script src="js/angular.js"></script>
	<script src="js/angular-ui.js"></script>
	<script src="js/script.js"></script>
	<link type="text/css" rel="stylesheet" href="css/test.css"/>
</head>
<body>
	<div id="test" ng-controller="TestController">
	    <h1>Ejemplo de cuestionario utilizando AngularJS</h1>
        <div class="questions">
            <div class="question" ng-repeat="question in questions">
                <p class="status-{{question.status}}">{{question.text}}</p>
                <div class="answers" ng-repeat="answer in question.answers">
                    <input type="radio" ng-model="question.userAnswer" value="{{answer.id}}" name="question-{{question.id}}" id="answer-{{question.id}}-{{answer.id}}" ng-change="validate(question)"/>
	                <label for="answer-{{question.id}}-{{answer.id}}">{{answer.text}}</label>
                </div>
            </div>
        </div>
    	<div class="userStatus {{userStatus}}">
	        <span>Has acertado {{validAnswers}} de {{questions.length}}</span>
        </div>
    </div>
</body>
</html>

And this is the code of the AngularJS script:
(it is not finished, but I’m stuck with handling the radio buttons click events and the [tt]question.userAnswer[/tt] parameter. I have put an alert but never get anything from this property):

var encuestaAppModule = angular.module("EncuestaApp", []);    
  encuestaAppModule.controller("TestController", function ($scope,$http) {    
    $http.get('questions.json').then(function(response){    
      $scope.questions = response.data; 
      $scope.validate = function(question) {
        alert (question.userAnswer);
      }
     //alert ('OK');   
  },     
  function(status){    
    //alert ('Error');
    console.error('Fail to load data', status, data);    
    $scope.questions = { };     
  });    
});  

I see that there are also other issues with the radio buttons but I still didn’t investigate them.

Thank you in advance.

I found the problem. It was a misspelled field name in the Json file.
It is resolved.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.