Angular JS - 自动聚焦输入并显示 typeahead 下拉菜单 - ui.bootstrap.typeahead [英] Angular JS - Automatically focus input and show typeahead dropdown - ui.bootstrap.typeahead
问题描述
我正在使用 Angular JS - ui.bootstrap.typeahead:
我想单击一个按钮并聚焦输入字段并自动显示预输入建议下拉列表.我有一个指令,可以在单击按钮时自动聚焦输入字段.如何自动显示下拉列表,以便用户可以使用向下箭头或单击来快速选择用户?
我创建了一个带有 ui-bootstrap JS 文件的 Plunker,可编辑用于修补:
http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview
这是我的完整脚本:
<html ng-app="plunker"><头><link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script><script src="ui-bootstrap-tpls-0.10.0.js"></script>头部><身体><脚本>angular.module('plunker', ['ui.bootstrap']).directive('focusMe', function($timeout, $parse) {返回 {//scope: true,//可选地创建一个子作用域链接:函数(范围,元素,属性){var 模型 = $parse(attrs.focusMe);范围.$watch(模型,函数(值){如果(值 === 真){$超时(功能(){元素[0].focus();});}});}};});函数 TypeaheadCtrl($scope, $http) {$scope.selected = 未定义;$scope.states = ['阿拉巴马州', '阿拉斯加州', '亚利桑那州', '阿肯色州', '加利福尼亚州', '科罗拉多州', '康涅狄格州', '特拉华州', '佛罗里达州', '乔治亚州', '夏威夷州',爱达荷州"、伊利诺伊州"、印第安纳州"、爱荷华州"、堪萨斯州"、肯塔基州"、路易斯安那州"、缅因州"、马里兰州"、马萨诸塞州"、密歇根州"、明尼苏达州"、密西西比州"', '密苏里州', '蒙大拿州', '内布拉斯加州', '内华达州', '新罕布什尔州', '新泽西州', '新墨西哥州', '纽约州', '北达科他州', '北卡罗来纳州', '俄亥俄州'', '俄克拉荷马州', '俄勒冈州', '宾夕法尼亚州', '罗德岛州', '南卡罗来纳州', '南达科他州', '田纳西州', '德克萨斯州', '犹他州', '佛蒙特州', '弗吉尼亚州', '华盛顿"、西弗吉尼亚"、威斯康星"、怀俄明"];$scope.opened = false;$scope.open = function() {$scope.opened = true;}$scope.close = function() {$scope.opened = false;}}<div class='container-fluid' ng-controller="TypeaheadCtrl"><h4>如何在按下按钮时自动打开预先输入下拉菜单?</h4><p>我有一个指令可以自动关注该领域,但我似乎无法自动显示预先输入.即使添加向下箭头键单击支持也会很棒.<br/><br/><button class="btn btn-default" ng-show="!opened" ng-click="open()">打开输入并显示预先输入!</button><button class="btn btn-default" ng-show="opened" ng-click="close()">关闭输入</button><br/><br/><输入类型="文本"焦点我=打开"ng-show="打开"ng-model="选择"typeahead="state for state in states | filter:$viewValue | limitTo:8"class="表单控件"><br/><pre ng-show="opened">型号:{{selected |json}}</pre>