如何为(AngularJS)UI-SELECT组件中的搜索输入设置最大长度

Question

假设我有以下（非常基本的）ui-select

的代码

<ui-select ng-model="vm.selected">
    <ui-select-match>
        <span ng-bind="$select.selected.label"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in vm.items">
        <span ng-bind="item.label"></span>
    </ui-select-choices>
</ui-select>

现在，这会生成所有HTML节点等，其中包含用于搜索和过滤列表中显示的选项的输入。

问题是：

如何为输入搜索设置（任何变体）最大长度？

指令不提供任何用于这样做的内置数据属性。

因此，预期的行为是：如果我设置了10个字符的最大长度，那么当用户类型/复制 粘贴的字符串大于指定长度时，输入搜索中的字符串就会被截断（但是，如果，如果您可以为我提供其他一些解决方案，这些解决方案允许用户在输入搜索中仅输入某些字符，我真的很感谢）

）

我在SO上找到了这个相关的问题，但是它不适用于这种情况，因为我无法访问通过ng-model或类似的输入搜索上键入的值。

Answer 1

您可以将自定义属性指令添加到ui-select指令，然后搜索其中的input.ui-select-search，最后添加和HTML maxlength属性...（plunker）

html

<ui-select ng-model="vm.selected" maxlen="15">
    <ui-select-match>
        <span ng-bind="$select.selected.label"></span>
    </ui-select-match>
    <ui-select-choices repeat="item in vm.items">
        <span ng-bind="item.label"></span>
    </ui-select-choices>
</ui-select>

指令

app.directive('maxlen', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      var $uiSelect = angular.element(element[0].querySelector('.ui-select-search'));
      $uiSelect.attr("maxlength", attr.maxlen);
    }
  }
});

可能不是最好的解决方案，但是正如您所说的，如果ui-select不支持它，则必须自己做...