Question

这是我的HTML代码

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

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

我不能默认ng-model的值。

我该如何设置？

Answer 1

为什么不使用ng-repeat？

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

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

Answer 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"];
});

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

3 个答案: