Определить выбранный переключатель в угловых

Question

Определить выбранный переключатель в угловых

0

У меня есть список вопросов, и у каждого вопроса есть набор параметров, я хочу получить выбранный пользователем ответ для каждого вопроса в 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>

И мой Угловой код

 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

jereesh thomas 17 июль 2015, в 14:11

Источник

Теги:

angularjs

json

binding

radiobuttonlist

ng-repeat

2 ответа

Ещё вопросы

Matt Herbstritt · Answer 1 · 2015-07-17T10-58-00.000Z

Вам нужно установить директиву ng-model на свои входы:

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

Когда этот вход проверен, пользователь user.answer === {{key}}

Чем ты @matt, я решил мою проблему, похожую на ваше предложение

Partha Sarathi Ghosh · Answer 2 · 2015-07-17T11-03-00.000Z

В соответствии с вашим дизайном лучше использовать ng-модель для каждого вопроса.

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

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 ), чтобы я мог избежать одной из директив ng-repeat.