How to add dynamic ng-model value to select option in ng-repeat

Question

I am working on a project wer I need to show a select option in ng-repeat.

As you can see on the above image we have number of select options. And on select option click I am calling a service which will fetch out the answer data to populate in select option.

My issue is each and every time I click on select option the first select answer will be empty.

Is thr any way that I can store the value of first dropdown and then select other dropdown without effecting other selected values.

<tr ng-repeat="question in questionnaireData track by $index">

    <td><span class="showDot">{{question.QuestionItem}}</span></td>
    <td>
        <div class="" >

            <select ng-if="question.MasterDataCategoryId != null"
                    id="{{question.QuestionId}}"
                    ng-model="question[$index]" class="form-control"
                    ng-click="getAnswersDetails(question)">
                <option selected="selected"></option>
                <option ng-repeat="answer in answerData"
                        value="{{answer.MasterData}}">
                   {{answer.MasterData}}
                </option>

            </select>

            <input ng-if="question.MasterDataCategoryId == null"
                   id="{{question.QuestionId}}"
                   ng-model="MasterDataCategoryId[$index].QuestionId"
                   type="text" name="question.QuestionId"
                   class="form-control">

        </div>

use ng-init as shown here https://stackoverflow.com/questions/14297560/how-to-make-a-preselection-for-a-select-list-generated-by-angularjs — Panos K, Nov 22 '17 at 09:30
Can you show at least one object of questionnaireData array? I'm thinking your ng-model is wrong, it should be something like question.QuestionId or question.QuestionName something like that (a primitive string property name) Just like what you did for input fields MasterDataCategoryId[$index].QuestionId . BTW you're not having this model change issue for select right & not for input fields right — Shantanu, Nov 22 '17 at 09:57
@Shantanu I have attached the image you can have a look. My issue is when I click on other dropdown the first selected dropdown value will be empty. — User123, Nov 22 '17 at 10:07
Ok so just try using ng-model as "question.MasterDataCategoryId" or "question.QuestionId" on select field & see if it works — Shantanu, Nov 22 '17 at 10:21
Or have new property (with undefined or null values) 'answer' and then something like ng-model="questionnaireData[$index].answer" on select field — Shantanu, Nov 22 '17 at 10:41
Once, I've got a problem that was similar with yours. Someone said me my '$index' was wrong. When using 'ng-repeat' inside of the other 'ng-repeat', you have to attach '$parent' in front of '$index' like '$parent.$index'. And if you want to use '$index' of outside 'ng-repeat', you should have to use '$parent.$parent.$index'. Try this. :) — Canet Robern, Nov 23 '17 at 09:22

How to add dynamic ng-model value to select option in ng-repeat

0 Answers0