我正在使用 bootstrap typeahead在我的 Angular 元素中。我的要求是在用户未输入任何文本时通过按下键打开预输入下拉菜单。我已使用 this link 成功添加了此功能.这是我的 demo .
现在向下键打开下拉菜单，因此它失去了遍历下拉菜单(向下移动到下一个选项)的默认行为。
index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<input type="text" ng-keydown="show($event)" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
<pre ng-show="opened">Model: {{selected | json}}</pre>
</div>
</body>
</html>
script.js
(function () {
var secretEmptyKey = '[$empty$]'
angular.module('plunker', ['ui.bootstrap'])
.directive('emptyTypeahead', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
// this parser run before typeahead's parser
modelCtrl.$parsers.unshift(function (inputValue) {
var value = (inputValue ? inputValue : secretEmptyKey); // replace empty string with secretEmptyKey to bypass typeahead-min-length check
modelCtrl.$viewValue = value; // this $viewValue must match the inputValue pass to typehead directive
return value;
});
// this parser run after typeahead's parser
modelCtrl.$parsers.push(function (inputValue) {
return inputValue === secretEmptyKey ? '' : inputValue; // set the secretEmptyKey back to empty string
});
}
}
})
.controller('TypeaheadCtrl', function($scope, $http, $timeout) {
$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
$scope.stateComparator = function (state, viewValue) {
return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
};
$scope.show = function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 40) { //If it's the down key
$timeout(function () {
$(e.target).triggerHandler('input');
});
}
};
});
}());
有没有办法在第一次点击时打开下拉菜单，然后在再次点击时移动到下一个选项？
最佳答案
最后，我通过在打开 typeahead 下拉菜单时放置一个 if 条件来解决这个问题。
$scope.show = function (e) {
if($scope.selected === undefined){
var keyCode = e.keyCode || e.which;
if (keyCode == 40) { //If it's the down key
$timeout(function () {
$(e.target).triggerHandler('input');
});
}
}
};
如果用户没有选择任何元素，则在 $scope.selected 中给出 undefined:
$scope.clearIfEmpty = function () {
if($scope.selected !== undefined && $scope.selected.length === 0){
$scope.selected = undefined;
}
}
关于javascript - 通过先单击向下键打开 typeahead 下拉菜单，然后遍历下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26773959/