如何聚焦angularjs的ui选择输入
how to focus angularjs ui-select input?
我的问题是我有一个框模式,有ui-选择下拉。当模态出现时,我想让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>
其实很简单。看一下文档就知道了。
autofocus:加载时自动对焦。默认值为"false"
把它加到html的第一行比如<ui-select class="cursorISI aaa selectType2 border-fixed" autofocus="true"
希望这对你有帮助
如果您想关注需求,那么ui-select
也提供事件广播支持。您需要将广播事件名称放在ui-select
的focus-on
属性中,并通过$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');
按钮点击或任何其他触发/事件。
如果你想让ui-select在初始化后聚焦并打开:
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>
我有同样的问题,需要添加一个指令
.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();
});
}
});
}
};
})
然后你的ui-select add
focus-me="true"
如果你想从控制器或指令中实现它(这个方法是独立工作的,它完全是角化的方式)-
说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-select
定义焦点道具focus-on="UiSelectDemo1"
相关文章:
- Angularjs:如何让ui选择只有一种方式的模型竞标
- 初始化ng模型时,Angular ui选择占位符不起作用
- 角度ui选择标记模糊时丢失文本输入
- AngularJS和UI-选择多个数据
- 角度:ui选择.具有“刷新”功能的自定义标记
- jquery ui选择菜单滚动条不工作
- jQuery UI选择菜单没有't接受百分比宽度
- 角度 1.2 升级后的角度 UI 选择下拉值问题
- 使用 jQuery UI 选择菜单中选择中的隐藏/显示选项
- ui选择未知提供程序
- 如何在 jquery 中删除 UI 选择菜单
- 如何在UI选择菜单中为每个选项指定选择功能
- 角度 UI 选择不呈现输入字段
- 如何设置角度 UI 选择的默认值
- 有没有办法在角度UI选择的下拉列表中的第n项之后创建分隔符
- 在 ui 选择中添加/删除焦点
- 在 IE8 中 UI 选择不呈现选择选项
- 角度 ui 选择占位符不起作用
- 使用日期时间选择器 UI 选择在日期时间之后使用什么方法触发事件
- 对象数组上的角度 ui 选择标记