Question

在select标签中使用ng-repeat时遇到很多麻烦。由于某些原因，以下内容无法正常工作，但所有文档都表明应该这样做。

<select id="blahh" ng-model="log_instances" class="selectpicker" multiple>
  <option>this works</option> <!-- this works -->
    <option ng-repeat="comp in env.status.components">test-value</option>
</select>

最终显示的唯一选项是'this works'，但我希望'test-value'显示在ng-repeat中描述的每个项目。

此外，我还检查了angular.element(document.getElementById('blahh')).scope()的控制台，它显示了我希望看到的正确数据。此外，如果我在此选择的正下方包含一个具有相同ng-repeat和字段的表，它会产生预期的输出就好了。我正在使用Angular 1.6.5

感谢任何帮助！

Answer 1

如下所示使用ng-options。但是您的代码也应该检查env.status.components

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

Answer 2

我的问题是，当你有ng-options方便时，为什么要在多项选择中使用ng-repeat？

假设您的comp对象如下所示：

{
  name: 'somevalue'
}

我会将您的代码更改为：

<select id="blahh"  multiple="true" ng-model="log_instances" ng-options="comp.name for comp in env.status.components"></select>

请查看我为您制作的plunker demo

Answer 3

原始问题中包含的HTML代码段有<span>个标记作为<select>代码的直接子代，这会产生无效标记，只有<option>或<optgroup>允许元素。

每当您有一个需要作为选择列表显示的数据集时，Angular的ng-options属性就可以轻松实现。

DEMO

此外，如果您需要一个默认选项（因为收集数据可能由于AJAX请求而传输），请包含一个分配有空值的<option>元素（即value=""），然后，当不再需要时，您可以使用ng-if隐藏此默认选项。

选择标记中的ng-repeat不产生结果

3 个答案: