代码之家 › 专栏 › 技术社区 › user1563677

AngularJs用户界面引导带滚动的Typeahead

bootstrap-typeahead angularjs css html

user1563677 · 技术社区 · 6 年前

我已经使用angularjsui引导创建了一个typeahead。代码如下:

    <div id="scrollable-dropdown-menu">
      <input type="text" name="uName" ng-model="uName" autocomplete="off" 
      required class="form-control input-medium" placeholder="Enter user 
      name..." typeahead="uName.uName for uName in getUserNames($viewValue)" 
      typeahead-on-select='onSelect($item, $model, $label)'/>
    </div>

我想添加一个滚动,所以我把它包装在一个div上,并添加css来实现滚动。

问题是,如果我开始绑东西,并使用键盘向下箭头在滚动,我看不到选定的项目,即滚动不移动与箭头键。我不得不用鼠标乱写。我相信这是因为我设定了一个div的高度。

我创建了一个演示程序,将问题显示为: https://codepen.io/kaka1981/pen/YOvYRY

有什么解决办法吗?

1 回复 | 直到 6 年前

user1563677 6 年前

我可以使用以下指令解决此问题:

  .directive('typeahead', function () {
    return {
        restrict: 'A',
        priority: 1000, // Let's ensure AngularUI Typeahead directive gets initialized first!
        link: function (scope, element, attrs) {
            // Bind keyboard events: arrows up(38) / down(40)
            element.bind('keydown', function (evt) {
                if (evt.which === 38 || evt.which === 40) {
                    // Broadcast a possible change of the currently active option:
                    // (Note that we could pass the activeIdx value as event data but AngularUI Typeahead directive
                    //  has its own local scope which makes it hard to retrieve, see:
                    //  https://github.com/angular-ui/bootstrap/blob/7b7039b4d94074987fa405ee1174cfe7f561320e/src/typeahead/typeahead.js#L104)
                    scope.$broadcast('TypeaheadActiveChanged');
                }
            });
        }
    };
}).directive('typeaheadPopup', function () {
    return {
        restrict: 'EA',
        link: function (scope, element, attrs) {
            var unregisterFn = scope.$on('TypeaheadActiveChanged', function (event, data) {
                if(scope.activeIdx !== -1) {
                    // Retrieve active Typeahead option:
                    var option = element.find('#' + attrs.id + '-option-' + scope.activeIdx);
                    if(option.length) {
                        // Make sure option is visible:
                        option[0].scrollIntoView(false);
                    }
                }
            });

            // Ensure listener is unregistered when $destroy event is fired:
            scope.$on('$destroy', unregisterFn);
         }
    };
});

感谢您的帖子: up/down arrow key issue with typeahead control (angular bootstrap UI)