CODEWITHSUNDEEP
angularjs
Pratz
Pratz

Reputation: 359

Bind ng-model dynamically with unknown input type

I have a HTML form where I have few questions with different answer type. For example question 1 has answer of type multi check box, question 2 has answer type of radio button, question 3 has answer type of text area. There can be "n" number of questions with any of the above type. Using ng-repeat I am able to render the questions on the HTML.

Now the problem is to read the answers filled by user. I need to send the response on submit of the form. I am not able to understand how to bind ng-model to each question.

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

How do I collect all the data entered by the user and use it in the "complete()" method?

Upvotes: 0

Views: 373

Answers (2)

NPToita
NPToita

Reputation: 238

In your <input> and <textarea> just add ng-model="question.answer". Then you can access the answers through each question's answer property.

Upvotes: 0

Michael Angstadt
Michael Angstadt

Reputation: 890

Because of the 2-way binding native to AngularJS, you don't really need to do anything.

As the user updates any of the inputs bound by ng-model to the underlying data model Angular will take care of synchronization.

You can simply call ng-click='complete(questions)' and you'll get the latest & greatest user's input scoped to your complete function.

Upvotes: 1

Related Questions