我们可以通过使用angular强大的指令系统来扩展基本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 >{{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>
这将创建一个带有不可选择的占位符的选择框，该占位符显示“您最喜欢的狗是什么？”
Plunker示例（在咖啡脚本中）：http
://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK
Plunker示例（使用javascript）：http
://plnkr.co/edit/6VNJ8GUWK50etjUAFfey
