使用未知输入类型动态绑定 ng-model答案

【问题标题】：Bind ng-model dynamically with unknown input type使用未知输入类型动态绑定 ng-model
【发布时间】：2015-12-01 18:02:25
【问题描述】：

我有一个 HTML 表单，其中有几个不同答案类型的问题。例如问题 1 具有多复选框类型的答案，问题 2 具有单选按钮的答案类型，问题 3 具有文本区域的答案类型。上述任何类型的问题都可以有“n”个问题。使用 ng-repeat 我可以在 HTML 上呈现问题。

现在的问题是阅读用户填写的答案。我需要在提交表单时发送回复。我无法理解如何将 ng-model 绑定到每个问题。

<form id="SubmitForm" name="SubmitForm" class="form-horizontal" role="form">
        <div ng-repeat="question in questions">
                <div class="col-sm-10">
                    <span>{{$index+1}}.   {{question.question}}</span>

                    <div ng-if="question.optionType.id == '1'"><!-- Multiple Choice -->
                        <div class="checkbox" ng-repeat="option in question.options | split track by $index">
                          <label><input name="{{question.id}}" type="checkbox" value="" ng-model="answer_question.id">{{option}}</label>
                        </div>
                    </div>
                    <div ng-if="question.optionType.id == '2'"><!-- radio button -->
                        <div class="radio" ng-repeat="option in question.options | split track by $index">
                            <label>
                                <input type="radio" name="{{question.id}}">
                                    {{option}}
                                <br>
                            </label>
                        </div>
                    </div>
                    <div ng-if="question.optionType.id == '3'"><!-- text box -->
                        <textarea rows="5" name="{{question.id}}"></textarea>
                    </div>
                </div>
        </div>

        <div class="form-group" align="center">
                <button id="completeSurvey" name="completeSurvey" class="btn btn-info" ng-click="complete()"><span class="glyphicon glyphicon-ok-sign"></span> Done</button>
        </div>
    </form>

如何收集用户输入的所有数据并在“complete()”方法中使用？

【问题讨论】：

标签： angularjs

【解决方案1】：

由于 AngularJS 原生的 2 路绑定，您实际上不需要做任何事情。

当用户将ng-model 绑定的任何输入更新到底层数据模型时，Angular 将负责同步。

您只需调用ng-click='complete(questions)'，您将获得最新和最伟大的用户输入，范围仅限于您的完整功能。

【讨论】：

【解决方案2】：

在您的<input> 和<textarea> 中添加ng-model="question.answer"。然后，您可以通过每个问题的 answer 属性访问答案。

【讨论】：