如何使用ng-options在选择上设置提示？ [英] How do I set a prompt on a select using ng-options?

问题描述

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

I have a select that uses ng-options to populate the select as follows:

<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。感谢您的建议。

I don't want to add a value to the collection for a default if the people collection is empty or no value is selected yet. I would like to have a prompt in the select to encourage them to use the select. Thanks for your suggestions.

推荐答案

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

Just add a default option, just so angular will use this option when there is nothing selected in the ngModel or an invalid item is populated in the model. This way you don't need to add an empty value in your collection.

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

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

You could also change the text based on the condition:-

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

如果已经选择了值，您也可以从DOM中删除它。

You can also remove it from DOM if it has already a selected value.

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

这篇关于如何使用ng-options在选择上设置提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！