将默认值设置为 AngularJs select，这在 ng-options 中不存在

Question

在 AngularJs <select> 中填充选项时，将添加一个额外的默认值 <option>，直到选择了一个值。

例如：

  <select 
    ng-model="select1"
    ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
  </select>

生成以下 HTML 标记：

<select ng-model="select1" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']" class="ng-pristine ng-valid ng-empty ng-touched">
   <option value="?" selected="selected"></option>
   <option label="Option 1" value="string:Option 1">Option 1</option>
   <option label="Option 2" value="string:Option 2">Option 2</option>
   <option label="Option 3" value="string:Option 3">Option 3</option>
</select>

一旦选择了一个选项，例如 "Option 1"，那么初始的 <option> 元素将被删除：

<select ng-model="select1" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']" class="ng-valid ng-touched ng-not-empty ng-dirty ng-valid-parse">
   <option label="Option 1" value="string:Option 1">Option 1</option>
   <option label="Option 2" value="string:Option 2">Option 2</option>
   <option label="Option 3" value="string:Option 3">Option 3</option>
</select>

但是我想添加一个默认值 "Please Select"，一旦选择了一个值，它也会被删除。

如果我将 <select> 设置为：

<select ng-model="select1" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']"> <option value="">Please Select</option> </select>

一旦选择了一个值，该值就不会被删除。

我也试过将 value 设置为 ?，但是没有显示该选项。

这是一个 JsFiddle 示例来说明我的问题：https://jsfiddle.net/rq2cgedm/

如何在 <select> 元素中显示默认值，一旦选择了有效选项，该元素就会被删除，就像默认的 AngularJs 行为一样？

Answer 1

我建议您在选项中使用 ng-repeat 而不是 ng-option。这将允许您保留原始默认值。

<select ng-model="select1">
    <option ng-value="" >default</option>
    <option ng-repeat="option in ['Option 1', 'Option 2', 'Option 3'] track by $index" ng-value="string:option">{{option}}</option>
</select>

虽然不确定这是否是您的意思

Answer 2

我试过你的fiddle，你可以通过添加一个禁用和隐藏的选项来解决这个问题，但也设置为默认值。

这导致选项未显示在下拉列表中以供选择，但仍将值显示为默认值。这似乎是您想要实现的目标。

例如：

<select ng-model="select2" ng-options="title as title for title in ['Option 1', 'Option 2', 'Option 3']">
    <option value="" disabled selected style="display: none;">Please Select</option>
</select>

我也有updated your fiddle来演示。

将默认值设置为 AngularJs select，这在 ng-options 中不存在

Setting a default value to AngularJs select which doesn't exist in ng-options

javascript

select

default-value

angularjs