[英]how to focus angularjs ui-select input?
myProblem是我有一个具有ui-select下拉列表的框模式。 当模态出现时,myUser可以使用键盘选择一个。 但是重点不在模式上。 我如何专注于ui-select的输入(重要,输入)? 非常感谢。
<ui-select class="cursorISI aaa selectType2 border-fixed"
on-select="Func.selectAnotherProject($item, $model)" theme="selectize"
ng-model="oldSelectedProject"> <ui-select-match>{{$select.selected.title}}
</ui-select-match> <ui-select-choices
repeat="project in projectList|filter: $select.search "
refresh-delay="0" style="direction: ltr; text-align: right;">
<div ng-bind="project.title"
ng-show="runSelectedProject.uid!=project.uid"></div>
</ui-select-choices> </ui-select>
实际上,这很简单。 简单看一下文档将告诉您这一点。
自动对焦:加载时自动获取焦点。 默认值为“ false”
因此,只需将其添加到html的第一行,如<ui-select class="cursorISI aaa selectType2 border-fixed" autofocus="true"
希望这会有所帮助-干杯
如果您想关注需求,那么ui-select
还提供事件广播支持。 您需要将广播事件名称focus-on
ui-select
focus-on
属性中,并通过$scope.$broadcast(...)
scope.broadcast广播该事件$scope.$broadcast(...)
<ui-select focus-on="UiSelectDemo1" ng-model="ctrl.person.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
调用$scope.$broadcast('UiSelectDemo1');
通过单击按钮或任何其他触发/事件。
例子取自这里 。
我有同样的问题,需要添加指令
.directive('focusMe', function($timeout) {
return {
scope: {trigger: '@focusMe'},
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if (value === 'true') {
$timeout(function() {
element[0].focus();
});
}
});
}
};
})
然后您的用户界面选择添加
focus-me="true"
如果要在初始化后使ui选择集中并打开,请执行以下操作:
yourModule.directive('uiSelectOpened', function($timeout) {
return {
restrict: 'A',
require: 'uiSelect',
link: function(scope, element, attrs, uiSelect) {
$timeout(()=> uiSelect.toggle())
}
};
});
的HTML:
<ui-select ... autofocus="true" ui-select-opened>...</ui-select>
如果您试图通过控制器或指令来实现它(此方法独立工作,并且完全采用角度方法)-
说ui-select包装在div-中
<div id="ui-select-wrapper">
<ui-select>
...
</ui-select>
</div>
setFocus的控制器方法-
var uiSelectWrapper = document.getElementById('ui-select-wrapper');
var focusser = uiSelectWrapper.querySelector('.ui-select-focusser');
var focusser = angular.element(uiSelectWrapper.querySelector('.ui-select-focusser'));
focusser.focus();
只需使用内置焦点选项即可! 在控制器中将此代码放入所需的方法中。
if(yourform.$error.required[0].$$attr.focusOn){
$scope.$broadcast(yourform.$error.required[0].$$attr.focusOn);
}
并为UI选择定义焦点道具
focus-on="UiSelectDemo1"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.