Как добавить невыбираемый и настраиваемый заполнитель в поле выбора

Ответ 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 your favorite dog?">
</select>

Это создаст поле выбора с невыбираемым заполнителем, в котором говорится: "Какая ваша любимая собака?"

Пример плунжера (в coffeescript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Пример плунжера (в javascript): http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

Ответ 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>