angularjs – 如何在选择框中添加不可选择的可定制占位符

前端之家收集整理的这篇文章主要介绍了angularjs – 如何在选择框中添加不可选择的可定制占位符前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个很大的应用程序,有很多下拉列表。我不想修改我的数据添加一个空白选项,我不希望占位符可以选择。最好的方法是什么?
我们可以通过使用角度的强大的指令系统来扩展基本的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.f2er.com/angularjs/144211.html

猜你在找的Angularjs相关文章