У меня есть HTML-форма, где у меня есть несколько вопросов с разными типами ответов. Например, в вопросе 1 есть ответ типа multi флажок, вопрос 2 имеет тип ответа ответа, вопрос 3 имеет тип ответа текстовой области. Может быть "n" количество вопросов с любым из вышеуказанных типов. Используя ng-repeat, я могу отображать вопросы по HTML.
Теперь проблема состоит в том, чтобы прочитать ответы, заполненные пользователем. Мне нужно отправить ответ на отправку формы. Я не могу понять, как привязать ng-модель к каждому вопросу.
<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 вам действительно не нужно ничего делать.
Поскольку пользователь обновляет любой из входов, связанных ng-model
с базовой моделью данных, Angular позаботится о синхронизации.
Вы можете просто называть ng-click='complete(questions)'
и вы получите самый последний и самый большой пользовательский вход для полной функции.
В ваших <input>
и <textarea>
просто добавьте ng-model="question.answer"
. Затем вы можете получить доступ к ответам через каждое свойство ответа на вопрос.