選択できない、カスタマイズ可能なプレースホルダを選択ボックスに追加するにはどうすればいいですか

Question

多くのドロップダウンを持つ非常に大きなアプリがあります。空白のオプションを追加するためにデータを変更する必要はなく、プレースホルダを選択可能にしたくありません。最善のアプローチは何ですか？

Answer 1

angleの強力な指示システムを使用して基本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's your favorite dog?"> 
</select> 

これは選択できない場所で選択ボックスを作成しますあなたの好きな犬は何ですか？

（CoffeeScriptの中）Plunker例：http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK

Plunker例（JavaScriptで）：また、HTMLで直接それを行うことができますhttp://plnkr.co/edit/6VNJ8GUWK50etjUAFfey

Answer 2

。

<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>