如何在选择框中添加一个不可选和可自定义的占位符

25 浏览
0 Comments

如何在选择框中添加一个不可选和可自定义的占位符

我有一个非常庞大的应用程序，其中有许多下拉菜单。我不想修改我的数据来添加一个空选项，也不想让占位符可选择。有什么最佳方法？

0

2 答案

0 Comments

有时候我们希望在选择框（select box）中添加一个默认选项，但是这个选项不能被选择，并且可以根据需求进行自定义。下面的代码展示了如何在html中实现这个功能：

这种方法非常简洁，是我见过的最优雅的方式。

0
0 Comments

问题的原因是希望在选择框中添加一个不可选择的自定义占位符。解决方法是使用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 = '';
      elem.prepend($interpolate(defaultOptionTemplate)(scope));
    }
  };
});

使用这个指令，我们可以这样做：

这将创建一个带有不可选择的占位符的选择框，占位符显示为"Select..."。

如果我们想要一个自定义的占位符，可以这样做：

这将创建一个带有不可选择的占位符的选择框，占位符显示为"What's your favorite dog?"。

这个解决方法不适用于动态的default-option，如果default-option是动态的，解决方法将无效。

此外，还提供了一些Plunker示例链接，供参考。

0