以角度识别选定的单选按钮答案

【问题标题】：Identify selected radio button in angular以角度识别选定的单选按钮
【发布时间】：2023-03-14 17:30:01
【问题描述】：

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

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

我的 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);
            });

         }
     };


  });

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

【问题讨论】：

标签： json angularjs binding ng-repeat radiobuttonlist

【解决方案1】：

您需要在输入中设置 ng-model 指令：

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

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

【讨论】：

比你@matt，我解决了我的问题，类似于你的建议

【解决方案2】：

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

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

然后将 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>

【讨论】：

谢谢@partha。我已经解决了，我的方法与您的建议完全相似，另一件事是我什至不需要选项数组，我只需要一个 json 键值对，这样我就可以通过 (key, val )set ，这样我就可以避免使用 ng-repeat 指令之一。