以角度标识选定的单选按钮

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

我有一个问题列表,每个问题都有一组选项,我想在控制器范围内的JSON中为每个问题获取用户选择的答案这是UI代码

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

而我的Angular代码是

 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

现在我想将我的问题JSON绑定到ng-repeat指令生成的单选按钮

2 个解决方案

#1

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

您需要在输入上设置ng-model指令:

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

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

检查此输入时user.answer === {{key}}

#2

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

根据您的设计,最好为每个问题使用ng-model。

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

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

然后将JSON显示为{{question | JSON}}只是对文本框吼叫。

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>

#1