Question

我正在尝试在AngularJS中创建一个指令，它同时充当输入和选择框。就像您在搜索文本框中键入时一样，下拉列表会弹出以帮助用户选择。选择通过鼠标点击工作正常，但我希望我的用户使用箭头键上下移动并选择输入。下面是我的HTML，CSS和Javascript代码。我们将非常感谢您在这方面的快速帮助。

/*******CSS Code******/

.input-dropdown {
    position: relative;
    display: inline-block;
}
.input-dropdown .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 2px;
    background: #EEE;
}
.input-dropdown .dropdown div {
    cursor: pointer;
    padding: 2px 5px;
}
.input-dropdown input:focus + .dropdown {
    display: block;
}

/ ******* AngularJS代码***************** /

    var app = angular.module('myApp', []);

    app.controller('MainCtrl', function ($scope) {
        $scope.values = ['Chrome', 'Firefox', 'IE'];
        $scope.pick = function (value) {
            console.log('Picked', value)
        };
    });

    app.directive('inputDropdown', function ($compile) {

        var template =
    '<input ng-model="ngModel">' +
    '<div class="dropdown">' +
        '<div ng-repeat="value in list | filter: ngModel">' +
            '<div ng-mousedown="select($event, value)">{{value}}</div>' +
        '</div>' +
    '</div>';

        return {
            restrict: 'EA',
            scope: {
                ngModel: '=',
                list: '=',
                onSelect: '&'
            },
            template: template,
            link: function (scope, element, attrs) {
                element.addClass('input-dropdown');
                scope.select = function (e, value) {
                    scope.ngModel = value;
                    scope.onSelect({ $event: e, value: value });
                };
            }
        };
    });

HTML代码：

<html ng-app="myApp">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body ng-controller="MainCtrl">

 <input-dropdown ng-model="preference" list="values" on-select="pick(value)"></input-dropdown> {{preference}}



</body>
</html>

使输入文本打开AngularJS中的下拉列表

0 个答案: