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属性.name属性用于在表单数据提交到服务器后识别表单数据，或者使用客户端的JavaScript引用表单数据。例如，您可能有几个具有不同id属性但具有相同名称的单选按钮。提交时，响应中只有一个值 - 您选择的单选按钮。

因此，name="{{q.qText}}"，对于特定问题的每组选项，它将呈现为name="question1"，name="question2"，name="question3"。

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

如何根据角度js中的用户输入构建对象？

2 个答案: