如何将不可选择和可自定义的占位符添加到选择框答案

【问题标题】：How do I add an unselectable and customizable placeholder to a select box如何将不可选择和可自定义的占位符添加到选择框
【发布时间】：2013-12-13 09:33:29
【问题描述】：

我有一个相当大的应用程序，其中包含许多下拉菜单。我不想修改我的数据来添加一个空白选项，我不希望占位符可以选择。最好的方法是什么？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

你也可以直接在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>

【讨论】：

这是我见过的最优雅的方式

【解决方案2】：

我们可以通过使用 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));
    }
  };
});

有了这个，我们现在可以做以下事情：

<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 示例（在咖啡脚本中）：http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker 示例（在 javascript 中）：http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

【讨论】：

如果默认选项是动态的，这将不起作用：plnkr.co/edit/SNMYtCcjTY5OVYup5TxX?p=preview
No.... 它没有：plnkr.co/edit/q4Kbymxgw3vY6dcXQW1b?p=preview 如果 defaultOption 稍后设置，则元素将不会呈现更新的选项。在我的示例中，defaultOption 设置为“TEXT 应该 BE THIS”，但您永远不会看到它更新，因为您已经创建了它。
另外，你看我的 plunkr 了吗？您会看到本地化过滤器没有触发
这里有几件事： 1. 你的指令没有触发，因为你的指令是错误的。它应该是一个过滤器。 2. 如果您查看 select over-ride 指令，您会注意到 defaultOption 是基于属性设置的，而不是基于作用域的值。因此，它必须是一个字符串。但是，由于 Angular 非常棒，您可以在此处使用如下表达式：plnkr.co/edit/aWUA2lXEeFqhCmZIdr1d
如前所述，查看最新的 plunker，如果在指令渲染后更新值，则没有任何变化。具体看setTimeout中的部分。