将 select 的默认值设置为 null 选项答案

【问题标题】：Set default value of select to null option将 select 的默认值设置为 null 选项
【发布时间】：2014-11-27 23:16:24
【问题描述】：

根据Angular documentation，您可以创建一个不属于您的模型的空选项。这允许您有一个描述性的选项。 IE。在他们的例子中，他们有-- choose color --。如何使 null 选项成为默认选项？我希望用户在首次加载页面时看到这个描述性的 null 选项。

如果您还可以告诉我如何通过 angular 禁用 null 选项，则可以加分。

【问题讨论】：

标签： angularjs select default angularjs-select2

【解决方案1】：

一旦他们有选择，只需使用 ng-if 将其完全删除。根据我的经验，最好的选择。

<select name="objectSelector"
    ng-model="selectedObject"
    ng-options="obj for obj in Objects" required>
    <option value="" ng-if="!selectedObject">--- Select Object ---</option>
</select>

如果你真的，真的必须在做出选择后显示'--- Select Object ---'，那么你可能只想插入第二个

<option value="" ng-if="!!selectedObject" disabled>--- Select Object ---</option>

然后可见选项会相应显示...还没有找到一种简单的方法来动态设置“禁用”。

【讨论】：

我还没有机会尝试，但这不是将默认设置为--selected object--吗？另外，我不想在他们选择后将其删除；我只是希望它被禁用。
好吧，如果 selectedObject 为空，那么这将是显示的选项...然后所有其他对象将在之后显示
已编辑答案，带有另一个禁用选项
啊，我明白了。我已经初始化了我的ng-model，我没有意识到你可以将它保留为空。所以我实际上想要的是只有一个常规的默认选项，and 不初始化我的模型。现在我只需要弄清楚如何禁用默认选项...
@beauXjames: ng-options="obj in Objects" 此代码不起作用。 ng-options 的预期表达式为 item for item in items

【解决方案2】：

该值自动设置为空。但是，如果您从 REST 接收数据，并且它将被设置为某个值 - 您可以将 ng-init 添加到您的 select 标签。而对于在选择某个值后禁用 null 选项 - 您需要将 ng-disabled 添加到您的 option 标记中。

<select ng-model="model" ng-options="item for item in items" ng-init="model = null">
  <option value="" ng-disabled="!!model">--Select option--</option>
</select>

在控制器中：

.controller('MainCtrl', function($scope) {
  $scope.model = 'First';
  $scope.items = ['First', 'Second', 'Third'];
});

演示：http://plnkr.co/edit/esoX26I9bESE59yneOvv

【讨论】：

正如stackoverflow.com/questions/18722783/… 中所讨论的那样，ng-disabled 属性并不总是一个可靠的选择...在我更复杂的实现中不起作用...理想，但有问题
我认为如果您还删除了$scope.model = 'First'，则可以删除ng-init。这样model 默认为空。
@DavidGrinberg：如果您将select 与promise 一起使用，并且模型是您从服务接收到的数据的一部分 - 响应后该值将不会设置为null 如果数据不是 null。所以在这种情况下ng-init 将有助于将模型值设置为null，如果它在初始化select 之前不为空。这是此案例的演示：plnkr.co/edit/MtDwvq7RyitpnxBRn6Br
@beauXjames：通过来自答案之一的链接，我看到问题是当您想禁用不是null 的选项中的某些选项时。对于这个问题中描述的问题，使用ng-disabled 就足够了，我建议使用本机angular 决策，而无需通过本问题不需要的指令扩展代码。