Question

我有一个带有预定义项目的基本ui-select下拉菜单。我也可以输入文本并将其添加到列表中。我需要做的是两件事。

允许的字符 - a-z，A-Z
允许的最大字符数为50

我想在打字时限制它们。因此，如果尝试使用数字搜索它只是不起作用或超过50个字符，它就会停止输入。

我找到了这个例子How to set a max length for the search input in (AngularJS) ui-select component?，但它对我不起作用。我将它设置为5长度进行测试。我也不确定如何限制只有a-z字符。

这是我的HTML - 这一点在使用ng-repeat

<div class="row">
     <div class="form-group">
      <div style="width:300px; margin-left:4px;" class="col-sm-6">
       <ui-select maxlen="5" ng-model="vehicle.linkNote" id="note-{{$index}}" on-select="selectNote(vehicle, $select.selected)">
        <ui-select-match  class="select" placeholder="Select or search a note in the list...">{{$select.selected }}</ui-select-match>
         <ui-select-choices  class="select" id="note-{{$index}}" repeat="note in getNotes($select.search) | filter: $select.search | orderBy:$select.search">
         <div class="select" for="note-{{$index}}" ng-bind="note"></div>
           </ui-select-choices>
             </ui-select>
            </div>
           </div>
          </div>

这是我的控制器的一部分

    $scope.selectNote = function(vehicle, selectedNote) {
    vehicle.linkNote = selectedNote;
    $scope.linkNotes.unshift(selectedNote);
    $scope.submitMapping(vehicle);
};


$scope.options = function (vehicle, optionAdjustment) {
        vehicle.optionAdjustment = optionAdjustment;
        $scope.submitMapping(vehicle);
};


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


$scope.$watch('note.selected', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        if ($scope.linkNotes.indexOf(newVal) === -1) {
            $scope.linkNotes.unshift(newVal);
        }
    }
});

$scope.getNotes = function(search) {
    var newNotes = $scope.linkNotes.slice();

    if (search && newNotes.indexOf(search) === -1) {
        newNotes.unshift(search);

    }
    return newNotes;
};

$scope.linkNotes = [
    'Cannot link half years',
    'Conflicting data provided by vendor',
    'Duplicate',
    'Incomplete data provided by vendor',
    'No ASC Code',
    'No data provided by vendor'
].sort();

Answer 1

可能不是您正在寻找的内容，但您在上面描述的所有功能都存在于HTML5中。

pattern="[a-zA-Z]+"将允许一个或多个字符：a-z, A-Z
maxlength="50"会将最大字符限制为50

工作示例：

＆＃13;

<input list="fruit" maxlength="50" pattern="[A-Za-z]+" placeholder="What fruit?" />

<datalist id="fruit">
<option value="Apple">
<option value="Apricot">
<option value="Avocado">
<option value="Banana">
<option value="Cherry">
<option value="Pear">
<option value="Peach">
<option value="Pineapple">
</datalist>

＆＃13;

angularjs ui-select基本验证

1 个答案: