如何使用ng-options在选择上设置提示?

时间:2014-08-28 18:58:40

标签: javascript angularjs angularjs-ng-options

我有一个使用ng-options填充select的选项,如下所示:

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

1 个答案:

答案 0 :(得分:10)

只需添加默认选项,只有在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已经选择了值,您也可以将其从DOM中删除。

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