个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用 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/
26
4
0
几个月前，我做了一个功能，我的应用程序正在等待用户文档并做出相应的响应。直到我对项目进行优化并将其更新到最新版本之前，它一直是一种魅力。 如果存在用户文档，则流将产生该文档并关闭该流。 如果云Fire
Stack Overflow 有几个 examples其中函数首先获得可升级锁，然后通过升级获得独占访问。我的理解是，如果不小心使用，这可能会导致死锁，因为两个线程可能都获得了可升级/共享锁，然后都尝
这个问题在这里已经有了答案: MVC 4 Code First ForeignKeyAttribute on property ... on type ... is not valid (1 个回答
以下是部分代码。我需要在 finally 子句中关闭资源。我需要先调用 closeEntry() 还是 close()？我收到一些错误消息。 Error closing the zipoutjava.
我想使用 RxJS-DOM 观察 mousewheel 事件，这样当第一个事件触发时，我转发它然后删除所有值，直到后续值之间的延迟超过先前指定的持续时间。 我想象的运算符可能看起来像: Rx.DOM.
版本似乎与安装的不同。 我在 npm install 上收到警告 我将二进制文件安装到我的家庭/开发目录中，但它不适用于 sudo。所以我安装了apt。 (注意:我并没有真正安装，我提取并将路径放在/
我正在尝试展示 GAN 网络在某些指定时期的结果。打印当前结果的功能以前与 TF 一起使用。我需要换成 pytorch。 def show_result(G_net, z_, num_epoch, s
我是一名优秀的程序员,十分优秀！