Come aggiungere un segnaposto non selezionabile e personalizzabile a una casella di selezione

Question

Ho un'app piuttosto grande con molti elenchi a discesa. Non voglio modificare i miei dati per aggiungere un'opzione vuota e non voglio che il segnaposto sia selezionabile. Qual è l'approccio migliore?

Answer 1

Possiamo farlo facilmente utilizzando il potente sistema di direttive angular per estendere l'html di base.

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 questo, possiamo ora procedere come segue:

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

Questo creerà un menu a tendina con un segnaposto non selezionabile che dice "Seleziona ..."

Se vogliamo un si può semplicemente fare questo:

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

Questo creerà una casella di selezione con un placeh non selezionabile più vecchio che dice "Qual è il tuo cane preferito?"

Plunker Esempio (in CoffeeScript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

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

Answer 2

Si può anche farlo direttamente nel codice 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>