angularjs发布单选按钮组集合（将每个组选中的选项保存在数组中或将选项发布到服务器）

Question

" 我是 angularjs 新手"
1- 场景描述：
- 我们正在做一些类似调查的事情，
- 许多问题，每个问题都包含许多答案，
- 问题及其答案使用 angularjs 从数据库自动呈现
- 当用户完成调查后，只需单击保存即可将选定的选项发布到服务器

2- 问题 :
- 使用“angularjs”我如何收集数组中的用户选择或将选择的选择发布到服务器。

代码：https://jsfiddle.net/6kxx2vLu/

Result Image

===================== angularjs 和 HTML =====================

<div ng-app="massApp" ng-controller="massCtrl">
    <ul>
        <li ng-repeat="question in Questions">
            <h1>{{question.questionAR}}</h1>
            <ul>
                <li ng-repeat="answerChoice in question.answerChoices">
                    <div ng-if="answerChoice.answerChoiceTypeId == '1' ">
                        <label for="elmnt{{question.questionId}}">
                            {{answerChoice.answerChoiceAr}}
                        </label>
                        <input type="radio" name="elmnt{{question.questionId}}" value="{{answerChoice.answerChoiceId}}" />
                    </div>
                </li>
            </ul>
        </li>
    </ul>
    <input ng-click="saveAnswers()" type="button" value="Save" />
</div>
<script type="text/javascript">
    (function () {
        //------
        var moCdataForTest = [{
            "questionId": 20,
            "questionAR": "How you Know Our Services?",
            "surveyId": 12,
            "qyestionAnswersTypeId": 1,
            "answerChoices": [
             {
                 "answerChoiceId": 1,
                 "questionId": 20,
                 "answerChoiceAr": "From web or Google Serach",
                 "answerChoiceTypeId": 1,
             },
             {
                 "answerChoiceId": 2,
                 "questionId": 20,
                 "answerChoiceAr": "From Frind",
                 "answerChoiceTypeId": 1,
             },
             {
                 "answerChoiceId": 3,
                 "questionId": 20,
                 "answerChoiceAr": "Newspaper ads",
                 "answerChoiceTypeId": 1,
             }
            ]
        },
       {
           "questionId": 21,
           "questionAR": "What is your satisfaction level?",
           "surveyId": 12,
           "qyestionAnswersTypeId": 1,
           "answerChoices": [
            {
                "answerChoiceId": 4,
                "questionId": 21,
                "answerChoiceAr": "Good",
                "answerChoiceTypeId": 1,
            },
            {
                "answerChoiceId": 5,
                "questionId": 21,
                "answerChoiceAr": "Very Good",
                "answerChoiceTypeId": 1,
            },
            {
                "answerChoiceId": 6,
                "questionId": 21,
                "answerChoiceAr": "Excellent",
                "answerChoiceTypeId": 1,
            }
           ]
       },
       {
           "questionId": 23,
           "questionAR": "What is Visit Rate?",
           "surveyId": 12,
           "qyestionAnswersTypeId": 1,
           "answerChoices": [
            {
                "answerChoiceId": 4,
                "questionId": 23,
                "answerChoiceAr": "1Star",
                "answerChoiceTypeId": 1,
            },
            {
                "answerChoiceId": 5,
                "questionId": 23,
                "answerChoiceAr": "2Star",
                "answerChoiceTypeId": 1,
            },
            {
                "answerChoiceId": 6,
                "questionId": 23,
                "answerChoiceAr": "3Star",
                "answerChoiceTypeId": 1,
            }
           ]
       }]
        //-------
        var massApp = angular.module("massApp", []);
        //-------
        massApp.controller("massCtrl", function ($scope) {
            $scope.Questions = moCdataForTest;
            $scope.saveAnswers = function () {
                alert('Data Saved');
            }
        });
        //-------
    })();
</script>

Answer 1

您只需要使用ng-model。

我看到您使用的是 Angular 1.2。在这个版本中，ng-model 不支持 getter/setter 功能，因此它无法从数组中添加/删除。

因此，您需要将 userAnswers 更改为对象而不是数组。

$scope.userAnswers = {};

当然，您可以$watch 对象将其同步到数组，或者您可以仅在提交点击时执行此操作。

这将允许您设置ng-model="userAnswers[question.questionId]"，例如：

<input type="radio"     
    ng-model="userAnswers[question.questionId]"
    ng-value="answerChoice.answerChoiceId"
    name="elmnt{{question.questionId}}" />

工作示例：

https://jsfiddle.net/Meligy/6kxx2vLu/8/

在保存按钮后查看userAnswers的形状。

还可以单击保存按钮并滚动到末尾以查看将其转换为数组的示例。

更新：

当您使用ng-model 时，您甚至不需要name。 Angular 将根据类似的 ng-model 为您处理分组 inputs。无论如何，它不能与label 一起使用，因为 Angular 不支持在表单控件的name 中进行插值（表达式）。

让label 工作的最简单方法是让它也包裹input，例如：

<label>
    {{answerChoice.answerChoiceAr}}
    <input type="radio"                             
           ng-model="userAnswers[question.questionId]"
           ng-value="answerChoice.answerChoiceId" />
</label>

示例：https://jsfiddle.net/xqc284xt/

---

另一种方法是使用ng-change。但是，在这种情况下，您需要检查数组是否具有给定问题 ID 的对象，以根据该对象添加或更新。我不会打扰，但如果您想要显示它的代码示例，请发表评论。

Answer 2

你使用表单输入数组<input name="foo[]" ... >

所以在你的情况下，它会是这样的：

<input type="radio" name="answers[{{question.questionId}}]" value="{{answerChoice.answerChoiceId}}" />

Answer 3

我认为，您想处理单选按钮中的 onclick 事件以收集相关问题的所有选定答案，

<input type="radio" name="elmnt{{question.questionId}}" value="{{answerChoice.answerChoiceId}}" onclick="setValue(event)" />

在 js 中你的代码：

var answer= function(name,value){
    this.name=name;
    this.value=value;
    };

    var questionsAnswers=[];

    function setValue(event){
        var evSrc = event.target;
        var arrLength = questionsAnswers.length;
        questionsAnswers[arrLength]=new answer(evSrc.name,evSrc.value);
    }

通过尝试，您可以在此数组 questionsAnswers 中获得选定的答案和问题

所以你可以在 saveAnswers 函数中处理它，就像这样：

 $scope.saveAnswers = function () {
                for (var i = 0; i < questionsAnswers.length; i++) {
        alert(questionsAnswers[i].name +' = ' +questionsAnswers[i].value);
    }

   }

希望这会有所帮助。

Answer 4

试试这个，

我更改了似乎更合乎逻辑的数据格式。

您需要处理 ng-click 的无线电输入并设置适当的选项，就像我在每个问题中设置的那样。

在保存功能中，我将所有 questionId 及其各自选择的答案收集在一个数组中。

请看this fiddle，我为你创建的。

希望对你有帮助！

Answer 5

只需对代码进行一些更改：

要使用单选按钮，您需要一个字段的模型属性来保存您的选择值，并在单选按钮上使用 ng-model 指令，该指令在每组中的值相同单选按钮

步骤：

1- 在嵌套数组 answerChoices 之外的第一级数组中添加名为 AnswerNumber 的新属性

 var moCdataForTest = [{
        "questionId": 20,
        "questionAR": "How you Know Our Services?",
        "surveyId": 12,
        "qyestionAnswersTypeId": 1,
        "AnswerNumber" :"",
        "answerChoices": [
         {                  
             "answerChoiceId": 1,
             "questionId": 20,
             "answerChoiceAr": "From web or Google Serach",
             "answerChoiceTypeId": 1,
         },
         {
             "answerChoiceId": 2,
             "questionId": 20,
             "answerChoiceAr": "From Frind",
             "answerChoiceTypeId": 1,
         },
         {
             "answerChoiceId": 3,
             "questionId": 20,
             "answerChoiceAr": "Newspaper ads",
             "answerChoiceTypeId": 1,
         }
        ]
    },
   {
       "questionId": 21,
       "questionAR": "What is your satisfaction level?",
       "surveyId": 12,
       "qyestionAnswersTypeId": 1,
       "AnswerNumber" :"",
       "answerChoices": [
        {
            "answerChoiceId": 4,
            "questionId": 21,
            "answerChoiceAr": "Good",
            "answerChoiceTypeId": 1,
        },
        {
            "answerChoiceId": 5,
            "questionId": 21,
            "answerChoiceAr": "Very Good",
            "answerChoiceTypeId": 1,
        },
        {
            "answerChoiceId": 6,
            "questionId": 21,
            "answerChoiceAr": "Excellent",
            "answerChoiceTypeId": 1,
        }
       ]
   },
   {
       "questionId": 23,
       "questionAR": "What is Visit Rate?",
       "surveyId": 12,
       "qyestionAnswersTypeId": 1,
       "AnswerNumber" :"",
       "answerChoices": [
        {
            "answerChoiceId": 4,
            "questionId": 23,
            "answerChoiceAr": "1Star",
            "answerChoiceTypeId": 1,
        },
        {
            "answerChoiceId": 5,
            "questionId": 23,
            "answerChoiceAr": "2Star",
            "answerChoiceTypeId": 1,
        },
        {
            "answerChoiceId": 6,
            "questionId": 23,
            "answerChoiceAr": "3Star",
            "answerChoiceTypeId": 1,
        }
       ]
   }]

2- 将 ng-model 指令添加到单选按钮并使用新属性的名称设置其值 AnswerNumber

<input type="radio"  ng-value="answerChoice.answerChoiceId" name="elmnt{{question.questionId}}" 
ng-model="question.AnswerNumber" />

3- 最后在您的作用域函数 saveAnswers 迭代作用域数组变量 Questions 以显示或将答案添加到 $scope.userAnswers 变量

            $scope.saveAnswers = function () {
            var values = "";
            for (i = 0; i < $scope.Questions.length; i++) {
                values += $scope.Questions[i].AnswerNumber + "\n";
                $scope.userAnswers[i] = $scope.Questions[i].AnswerNumber;
            }     
            alert($scope.userAnswers);
            //alert(values);
            alert('Data Saved');                
        };

我已经用答案更新了你的在线代码

Answer 6

我已经更新了你的 jsfiddle https://jsfiddle.net/6kxx2vLu/7/

我已将 ng-model 添加到 input[radio] 并将其绑定到 question.answer

<input type="radio" ng-value="answerChoice.answerChoiceId" 
             name="elmnt{{question.questionId}}" ng-model="question.answer" />

保存时我映射这样的问题数组

$scope.answers = $scope.Questions.map(function(q){return q.answer;});