Question

我有一个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（）”方法中使用它？

Answer 1

由于AngularJS原生的双向绑定，你根本不需要做任何事情。

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

您只需致电ng-click='complete(questions)'，即可获得最新的＆amp;最大的用户输入作用于您的完整功能。

Answer 2

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

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

2 个答案: