CODEWITHSUNDEEP
jsonangularjsbindingangularjs-ng-repeatradiobuttonlist
jereesh thomas
jereesh thomas

Reputation: 163

Identify selected radio button in angular

I have a list of questions and each question have a set of options , I want to get the user selected answer for each question in the JSON in the controller scope Here is the UI Code

<!DOCTYPE html>
 <html lang="en-US">
  <script src="http://localhost:2088/mock/scripts/angular.min.js"></script>
  <script src="http://localhost:2088/mock/scripts/mocktestmodule.js"></script>
<body>
 <div ng-app="mocktestApp" ng-controller="QuestionCtrl">

  <li ng-repeat="question in Questions">
       <p>{{question._question  }}</p>

        <ul ng-repeat="option in question.options">

          <li ng-repeat="(key, value) in option"><input type="radio"    name="option" value="{{key}}" /> {{value}}</li>

    </ul>
   </li>

   <button value="Next>" ng-click="next()">Next</button>

 </div>


 </body>
</html>

And my Angular code is 

 var app = angular.module('mocktestApp', []);
 app.controller('QuestionCtrl',['$scope','questionFactory',     function($scope,questionFactory) {




questionFactory.Get(function(data){

     $scope.Questions=[{
        "_question"   :"Question 1",
         "options":[{
                        "1":"11QWERT",
                        "2":"22QWERT",
                        "3":"11QWERT",
                        "4":"22QWERT"
                   }]
     },{
            "_question"   :"Question 2",
             "options":[{
                            "1":"ABCD",
                            "2":"EFGH",
                            "3":"HIJK",
                            "4":"LMNO"
                       }]
         }];

});

   $scope.next=function()
   {
    questionFactory.Next(function(data){


         $scope.Questions=data;

      });
  }


 }]);


  app.factory("questionFactory", function ($http) {


     var getURL="http://localhost:2088/test";
     var nextURL="http://localhost:2088/test/next";
     return {
            Get: function (callback) {

            $http.get(getURL)
            .success(function (response, status)
                    { callback(response) }
               )
            .error(function (data, status, headers, config) {
               callback(data);
           });

         },
         Next: function (callback) {

             $http.get(nextURL)
            .success(function (response, status)
                    { callback(response) }
               )
           .error(function (data, status, headers, config) {
               callback(data);
            });

         }
     };


  });

Now I want to bind my questions JSON to the radio buttons generated by the ng-repeat directive

Upvotes: 0

Views: 551

Answers (2)

user363283
user363283

Reputation:

As per your design it is better to use ng-model for each question.

<input type="radio" ng-model="question.answer"   name="option" value="{{key}}" />

And then display the JSON as {{question | JSON}} just bellow the text boxes. 

var app = angular.module('mocktestApp', []);
 app.controller('QuestionCtrl',['$scope', function($scope,questionFactory) {

     $scope.Questions=[{
        "_question"   :"Question 1",
         "options":[{
                        "1":"11QWERT",
                        "2":"22QWERT",
                        "3":"11QWERT",
                        "4":"22QWERT"
                   }]
     },{
            "_question"   :"Question 2",
             "options":[{
                            "1":"ABCD",
                            "2":"EFGH",
                            "3":"HIJK",
                            "4":"LMNO"
                       }]
         }];
   

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mocktestApp" ng-controller="QuestionCtrl">

  <li ng-repeat="question in Questions">
       <p>{{question._question  }}</p>

        <ul ng-repeat="option in question.options">

          <li ng-repeat="(key, value) in option">
            <input type="radio"    ng-model="question.answer" value="{{key}}" /> {{value}}</li>

    </ul>
   </li>
   <button value="Next>" ng-click="next()">Next</button>
   {{Questions}}
 </div>

Upvotes: 0

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

You need to set the ng-model directive on your inputs:

<input type="radio" ng-model="user.answer"   name="option" value="{{key}}" />

When this input is checked user.answer === {{key}}

Upvotes: 1

Related Questions