Question

我有一个问题列表，每个问题都有一组选项，我想在控制器范围内的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>

我的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 指令生成的单选按钮

Answer 1

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

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

选中此输入时user.answer === {{key}}

Answer 2

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

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

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

＆＃13;

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"
                       }]
         }];
   

}]);

＆＃13;

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

＆＃13;

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

2 个答案: