angularjs - ngstyle angular 5

¿Cómo agrego un marcador de posición personalizable y no seleccionable a un cuadro de selección?

Question

Tengo una aplicación bastante grande que tiene muchos menús desplegables. No quiero tener que modificar mis datos para agregar una opción en blanco y no quiero que el marcador de posición sea seleccionable. ¿Cuál es el mejor enfoque?

Answer 1

Podemos hacer esto fácilmente usando el poderoso sistema de directivas de angular para extender el html básico.

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));
    }
  };
});

Con esto, ahora podemos hacer lo siguiente:

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

Esto creará un cuadro de selección con un marcador de posición no seleccionable que dice "Seleccionar ..."

Si queremos un marcador de posición personalizado, simplemente podemos hacer esto:

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

Esto creará un cuadro de selección con un marcador de posición no seleccionable que dice "¿Cuál es tu perro favorito?"

Ejemplo de Plunker (en coffeescript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Ejemplo de Plunker (en javascript): http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

Answer 2

También puedes hacerlo directamente en el 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>