我们可以通过使用角度的强大的指令系统来扩展基本的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
原文地址:https://www.jb51.cc/angularjs/144211.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。