How do I add an unselectable and customizable placeholder to a select box

Question

I\'ve got a pretty large app that has many dropdowns. I don\'t want to have to modify my data to add a blank option and I don\'t want the placeholder to be selectable. What\

Answer 1

We can do this easy by using angular's powerful directive system to extend basic 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 = '{{defaultOptionText}}';
      elem.prepend($interpolate(defaultOptionTemplate)(scope));
    }
  };
});

With this, we can now do the following:

This will create a select box with an unselectable placeholder that says "Select..."

If we want a custom placeholder we can simply do this:

This will create a select box with an unselectable placeholder that says "What's your favorite dog?"

Plunker Example (in coffeescript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker Example (in javascript): http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey