javascript - 如何使用 ng-options 在 select 上设置提示？

Question

我有一个使用 ng-options 填充选择的选择，如下所示：

<select class="form-control" 
   ng-model="Data.selectedPerson" 
   ng-options="v as (v.Name ) for v in Data.people track by v.Name">
</select>

如果人员集合为空或尚未选择任何值，我不想为集合添加默认值。我想在 select 中有一个提示，以鼓励他们使用 select。感谢您的建议。

Answer 1

只需添加一个默认选项，当 ngModel 中未选择任何内容或模型中填充了无效项目时，Angular 将使用此选项。这样您就不需要在集合中添加空值。

<select class="form-control" 
   ng-model="Data.selectedPerson" 
   ng-options="v as v.Name for v in Data.people  track by v.Name">
   <!-- Add your default option here -->
   <option value="">Please select a person</option>

</select>

您还可以根据条件更改文本：-

  <option value="">{{ Data.people.length ? "Please select a person" : "No one available for selection" }}</option>

如果它已经有一个选定的值，您也可以从 DOM 中删除它。

   <option ng-if="!Data.selectedPerson" value="">Please select a person</option>