Question

myProblem是我有一个具有ui-select下拉列表的盒子模态。当模态来iwant 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>

Answer 1

实际上，它相当简单。只需查看documentation即可告诉您。

自动对焦：加载时自动获得焦点。默认值为＆＃39; false＆＃39;

所以，只需将其添加到html的第一行，例如<ui-select class="cursorISI aaa selectType2 border-fixed" autofocus="true"

希望这会有所帮助 - 干杯

Answer 2

如果您要关注需求，那么ui-select还提供事件广播支持。您需要将广播事件名称放入focus-on的{{1}}属性中，并通过ui-select广播该事件

$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>。

摘自here的示例。

Answer 3

我有同样的问题，需要添加指令

.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添加

 focus-me="true"

Answer 4

如果你想让你的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>

Answer 5

如果您正试图通过控制器或指令实现它（此方法独立工作，并采用完全有角度的方式） -

说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();

Answer 6

只需使用内置焦点选项即可！在控制器中，将此代码放入所需的方法中。

            if(yourform.$error.required[0].$$attr.focusOn){
                $scope.$broadcast(yourform.$error.required[0].$$attr.focusOn);
            }

并为ui-select定义焦点道具

focus-on="UiSelectDemo1"

如何聚焦angularjs ui-select输入？

6 个答案: