Jak dodać niewybaczalny i dostosowywalny symbol zastępczy do pola wyboru

Question

Mam dość dużą aplikację, która ma wiele list rozwijanych. Nie chcę modyfikować moich danych, aby dodać pustą opcję i nie chcę, aby można było wybrać symbol zastępczy. Jakie jest najlepsze podejście?

Answer 1

Możemy to zrobić łatwo, stosując potężny system dyrektyw firmy Angular do rozszerzenia podstawowego 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)); 
    } 
    }; 
}); 

Dzięki temu możemy teraz wykonać następujące czynności:

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

To stworzy pole zaznaczania z Nie można wybrać zastępczy, który mówi „Wybierz ...”

jeśli chcemy zwyczaj zastępczy może po prostu to zrobić:

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

to stworzy pole zaznaczania z Nie można wybrać placeh starsze, które mówi "Jaki jest twój ulubiony pies?"

Plunker Przykład (w coffeescript): http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker Przykład (w javascript): http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

Answer 2

Można również zrobić to bezpośrednio w 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>