如何在选择框中添加不可选择和可自定义的占位符

Question

我有一个非常大的应用程序,有很多下拉菜单.我不想修改我的数据以添加空白选项,我不希望占位符可选.什么是最好的方法？

Answer 1

我们可以通过使用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示例(在coffeescript中):http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker示例(在javascript中):http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

Answer 2

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