Question

我如何让<input type="text">显示下拉可能就像在自动完成扩展程序中发生但没有输入我的意思是一旦我专注于文本输入框，它应该显示像下拉列表。

I Wish

简单来说，我想展示<select></select>

的<input type="text">

Answer 1

您可以做的最好的事情是编写简单的可重用指令。这是一个快速的基本实现：

SafePinvoke

显示/隐藏行为将由CSS控制：focus伪类：

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

    var template = 
        '<input ng-model="ngModel">' +
        '<div class="dropdown">' + 
            '<div ng-repeat="value in list">' +
                '<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});
            };
        }
    };
});

这是一个用法：

.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;
}

演示： http://plnkr.co/edit/v1o3fH2vfU9acBSagVZI?p=preview

Answer 2

下面的代码工作正常。注意我也添加了一个过滤器，以便在您在文本框中键入时过滤掉匹配的颜色。请放置所需的CSS，懒得去做。 :-P

<!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('dropDownController', function($scope){
        $scope.items = ["orange", "white", "purple", "red", "green"];
        $scope.showDropdown = function(){
         $scope.dropDown = true;
       };

    $scope.hideDropdown = function(){
         $scope.dropDown = false;
       };


    });
    </script>
    </head>
    <body ng-controller="dropDownController">

        <input type="text" ng-focus="showDropdown()" ng-blur="hideDropdown()" ng-model="color">

        <div ng-show="dropDown" style="border: 1px solid black;">
        <ul ng-repeat= "item in items |filter: color">
        <li>{{item}}</li>
        </ul>
        </div>





    </body>
    </html>

Answer 3

您可以在输入中使用ng-focus切换控件ng-show（或ng-hide）变量的值，类似于下拉列表元素

<input type="text" ng-focus="toggleDropDown(...)">

<div ng-show="dropDown">

toggleDropDown()方法和dropDown变量在您的控制器中定义 - 实现完全取决于您。

Angular ::使输入文本在焦点时打开下拉列表

3 个答案: