如何在 ng-options 中的选择中设置显示标签答案

【问题标题】：How to set display tag in select in ng-options如何在 ng-options 中的选择中设置显示标签
【发布时间】：2015-10-02 06:26:38
【问题描述】：

这是我的html代码

<select ng-model="something"  ng-options="availThing.description for availThing in availableThings >
     <option value="">-- select field --</option>
</select>

我想要做的是在一些选择元素中，默认显示某些标签而不是“--select field--”。

而且我不能默认 ng-model 的值。

我应该如何设置？

【问题讨论】：

默认显示某些标签而不是选择字段这是什么意思？
可能重复stackoverflow.com/questions/17329495/…
@AlexJolig 对不起，我的错。我的意思是我有一个额外的选项“--select fileld--”。我希望我的一些选择框默认显示其他标签而不是这个标签。
@ste2425 实际上不是因为在我的情况下我不能默认 ng-model 的值。感谢回复。

标签： angularjs select ng-options

【解决方案1】：

为什么不使用ng-repeat？

 <select>
  <option value="somthing">-- select field --</option>
  <option ng-repeat="availThing in availableThings" value="{{availThing.description}}">
   {{availThing.description}}
  </option>
 </select>

【讨论】：

【解决方案2】：

您可以通过将ng-model 设置为集合中的项目来预填充有效选项。

但是，如果您将其设置为不在该集合中的项目，您的 ng-model 将保持设置，但该项目不会出现在下拉选项中，或者看起来是可视设置的。

我过去所做的最后一个选项与您的相似。但是我发现即使用户选择了select option 选项仍然可用的选项。添加ng-if 是解决方案。

<select ng-model="selected3" ng-options="item for item in items">
    <option value="" ng-if="!selected3">-- select field --</option>
</select>

仅当您未选择选项时才会显示该元素。使用 ng-if 而不是 ng-show/hide 意味着该元素已从 DOM 中删除，因此您不会意外地使用 CSS 等选择它。

见小提琴：http://jsfiddle.net/hd89kds6/1/

【讨论】：

【解决方案3】：

您必须检查 ng-model。如果要选择默认值，则无需定义 $scope.something 变量。下面的代码工作正常。

<select ng-model="selectedName" ng-options="item for item in names">
<option value="">-- select field --</option>
</select>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

【讨论】：