Angularjs 如何将不可选择且可自定义的占位符添加到选择框

我有一个相当大的应用程序，有很多下拉列表。我不希望必须修改数据以添加空白选项，也不希望占位符是可选的。最好的方法是什么？

通过使用angular强大的指令系统扩展基本html，我们可以轻松做到这一点

app.directive('select', function($interpolate) {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      var defaultOptionTemplate;
      scope.defaultOptionText = attrs.defaultOption || 'Select...';
      defaultOptionTemplate = '<option value="" disabled selected style="display: none;">{{defaultOptionText}}</option>';
      elem.prepend($interpolate(defaultOptionTemplate)(scope));
    }
  };
});

app.directive（'select'，函数（$interpolate）{
返回{
限制：'E'，
要求：'ngModel'，
链接：函数（范围、元素、属性、ctrl）{
var defaultOptionTemplate；
scope.defaultOptionText=attrs.defaultOption | |“选择…”；
defaultOptionTemplate='{{defaultOptionText}}}'；
元素前置（$interpolate（defaultOptionTemplate）（范围））；
}
};
});

有了这些，我们现在可以执行以下操作：

<select ng-model="number" 
    ng-options="item.id as item.label for item in values">
</select>

这将创建一个带有不可选择占位符的选择框，该占位符显示“选择…”

如果需要自定义占位符，我们可以简单地执行以下操作：

<select ng-model="dog" 
    ng-options="dog.id as dog.label for dog in dogs" 
    default-option="What's your favorite dog?">
</select>

这将创建一个带有不可选择占位符的选择框，上面写着“你最喜欢的狗是什么？”

Plunker示例（在coffeescript中）：

---

Plunker示例（javascript）：

您也可以直接在html中执行

<select   ng-model="number"
          ng-options="item.id as item.label for item in values">
          <option value="" disabled selected style="display: none;"> Default Number </option>
></select>

默认号码
>

如果默认选项为“动态”，则此选项不起作用：否。。。。不会：如果在以后设置defaultOption，那么元素将不会呈现更新的选项。在我的示例中，defaultOption设置为“TEXT SHOULD THIS”，但您从未看到它更新，因为您已经创建了它。另外，您是否查看了我的plunkr？您将看到localize过滤器并没有在这里运行：1。你的指令没有被触发，因为你的指令是错误的。它应该是一个过滤器。2.如果查看select over ride指令，您会注意到defaultOption是基于属性而不是范围值设置的。因此，它必须是一个字符串。但是，因为angular非常棒，所以可以在那里使用这样的表达式：如前所述，查看最新的plunker，如果在呈现指令后更新值，则没有任何变化。具体来看setTimeout中的部分。这是我见过的最优雅的方式