javascript - ng-repeat 中的下拉菜单无法正常工作

Question

我正在做一个项目，我需要在 ng-repeat 中显示与该项目相关的问卷和答案下拉列表。

当我检查下拉菜单时，我调用 API 来获取答案信息以在下拉菜单中显示。

当我点击第一个下拉菜单时，它会正确打开并显示所有数据。

但是当我第二次点击任何下拉菜单时，它无法正常打开。

谁能帮我知道是什么问题。

下面是它的代码。

<tr ng-repeat="question in questionnaireData track by $index">
<td><span class="" title="{{question.QuestionItem}}">{{question.QuestionItem}}</span></td>
<td>
    <div class="">
        <!--<label for="answers">Select Answer</label>-->
        <select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">
            <option selected="selected"></option>
            <option ng-repeat="answer in answerData[question.MasterDataCategoryId]" value="{{answer.MasterData}}">{{answer.MasterData}}</option>
        </select> 
        <input ng-if="question.MasterDataCategoryId == null" id="{{question.QuestionId}}" ng-model="question.MasterData" type="text" name="question.QuestionId" class="form-control">
        <!--<span class="help-inline" ng-show="submitted && formVHD.$valid"></span>-->
    </div>
</td>

Answer 1

如果你想创建一个下拉列表，最好使用 ng-option 然后 ng-repeat。

<select ng-option="x.data for x in myItems"> 
</select>

因为 ng-repeat 指令为数组中的每个项目重复一段 HTML 代码，它可用于在下拉列表中创建选项，但 ng-options 指令专门用于用选项填充下拉列表，并且至少有一个重要的优势:

使用 ng-options 制作的下拉菜单允许选择的值是一个对象，而使用 ng-repeat 制作的下拉菜单必须是一个字符串。

此外，您还使用了相同的 ng-model、id 来选择和输入类型的文本，我认为这不是一个好主意

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

<select ng-if="question.MasterDataCategoryId != null" id="{{question.QuestionId}}" ng-model="question.MasterData" class="form-control" ng-click="getAnswersDetails(question)">

在您的情况下，您的选择应该如下所示，您应该使用 ng-change 而不是 ng-click。

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