Как построить объект на основе пользовательского ввода в угловых js?

Question

в моей форме с переключателями, все радио кнопки, исходящие от объекта json. пользователь нажимает кнопку отправки, все данные радиокнопки хранятся в объекте.

 <form name="regForm"> 
     <ul> 
      <li ng-repeat="q in que"> 
       {{q.qText}} {{$index+1}} 
       <div ng-repeat="opt in q.options"> 
        <input type="radio" ng-model="option" value="'{{opt}}'"/><label>{{opt}}</label> 
       </div> 
       {{option}} 
      </li> 
     </ul> 
    <button ng-click="submitForm()">Submit</button> 
</form>    

при нажатии на кнопку. все входной переключатель необходимо отобразить в поле предупреждения, как я могу это сделать. пожалуйста, помогите мне и JSon данные:

angular.module("test",[]) 
.controller('ctr1', function($scope){ 
    $scope.ques={ 
    "q1": { 
       "qText": " question1", 
       "result":"option1", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q2": { 
       "qText": " question2", 
       "result":"option1", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      }, 
      "q3": { 
       "qText": " question3", 
       "result":"option1", 
       "options":{ 
        "A":"option1", 
        "N":"option2", 
        "D":"otpion3", 
        "NA":"option4" 
       } 
      } 
    } 
}) 

Answer 1

<form name="regForm"> 
    <ul> 
     <li ng-repeat="(que,key) in ques track by $index"> 
      {{que.q1}} {{$index+1}} 
      <div ng-repeat="(option,key2) in que[key].options"> 
       <input type="radio" ng-model="option.status" value="'{{option}}'"/><label>{{option}}</label> 
      </div> 
      {{option}} 
     </li> 
    </ul> 
<button ng-click="submitForm()">Submit</button> 

$scope.submitForm = function(){ 
for(var que in ques){ 
    for(var option in ques[que].options){ 
    alert(ques[que].options[option].status) 
    } 
} 

} 

попробовать это может работать

В опции, я добавляю новый статус поля, который даст о статусе выбранное радио. Позвольте мне знать, будет ли это работать

Answer 2

Некоторые наблюдения:

• Согласно связывании в HTML ваш ваш $scope.ques не будет работать. Вы должны изменить свой json.

  $scope.que=[ 
  { 
        "qText": " question1", 
        "result":"option1", 
        "options":{ 
         "A":"option1", 
         "N":"option2", 
         "D":"otpion3", 
         "NA":"option4" 
        } 
       }, 
       { 
        "qText": " question2", 
        "result":"option1", 
        "options":{ 
         "A":"option1", 
         "N":"option2", 
         "D":"otpion3", 
         "NA":"option4" 
        } 
       }, 
       { 
        "qText": " question3", 
        "result":"option1", 
        "options":{ 
         "A":"option1", 
         "N":"option2", 
         "D":"otpion3", 
         "NA":"option4" 
        } 
       } 
      ]; 
  

• все радио должны иметь атрибут name attribute.The имя используется для идентификации данных формы после того, как она была отправлена ​​на сервер, или ссылаться на данные формы JavaScript на стороне клиента. Например, у вас может быть несколько переключателей с разными атрибутами идентификаторов, но с тем же именем. Когда отправлено, в ответе есть только одно значение - выбранный вами переключатель.

  Так, name="{{q.qText}}", это будет отображаться как name="question1", name="question2", name="question3" для каждого набора опций для конкретного вопроса.

Работа демо:

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.que=[ 
 
    { 
 
       "qText": " question1", 
 
       "result":"option1", 
 
       "options":{ 
 
        "A":"option1", 
 
        "N":"option2", 
 
        "D":"otpion3", 
 
        "NA":"option4" 
 
       } 
 
      }, 
 
      { 
 
       "qText": " question2", 
 
       "result":"option1", 
 
       "options":{ 
 
        "A":"option1", 
 
        "N":"option2", 
 
        "D":"otpion3", 
 
        "NA":"option4" 
 
       } 
 
      }, 
 
      { 
 
       "qText": " question3", 
 
       "result":"option1", 
 
       "options":{ 
 
        "A":"option1", 
 
        "N":"option2", 
 
        "D":"otpion3", 
 
        "NA":"option4" 
 
       } 
 
      } 
 
    ]; 
 
    
 
$scope.arr = []; 
 
$scope.saveOption = function(question,selectedOpt) { 
 
var obj = {}; 
 
obj.question = question; 
 
obj.answer = selectedOpt; 
 
$scope.arr.push(obj); 
 
} 
 

 
$scope.submitForm = function() { 
 
    console.log($scope.arr); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
<form name="regForm"> 
 
     <ul> 
 
      <li ng-repeat="q in que"> 
 
       {{q.qText}} {{$index+1}} 
 
       <div ng-repeat="opt in q.options"> 
 
        <input type="radio" name="{{q.qText}}" ng-model="option" value="{{opt}}" ng-click="saveOption(q.qText,option)"/><label>{{opt}}</label> 
 
       </div> 
 
       {{option}} 
 
      </li> 
 
     </ul> 
 
    <button type="submit" ng-click="submitForm()">Submit</button> 
 
</form>  
 
</div>