我们可以通过使用角度的强大的指令系统来扩展基本的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>
这将创建一个选择框与一个不可选择的占位符,说“你最喜欢的狗是什么?”
Plunker示例(在coffeescript中):http://plnkr.co/edit/zIs0W7AdYnHnuV21UbwK
Plunker示例(在javascript中):http://plnkr.co/edit/6VNJ8GUWK50etjUAFfey