Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to focus angularjs ui-select input?

myProblem is I have a box modal that have ui-select dropdown. when the modal come iwant myUser can choose oneOf the item with keyboard. but focus is not on modal. how can i focus on input(important, input) of ui-select? thanks alot.

<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>
like image 999
Abbas Alipour Avatar asked Sep 17 '15 09:09

Abbas Alipour


2 Answers

Actually, it's fairly simple. A simple look at the documentation will tell you this.

autofocus: Automatically get focus when loaded. Default value is 'false'

So, just add that to the first line of your html like <ui-select class="cursorISI aaa selectType2 border-fixed" autofocus="true"

Hope this helps - Cheers

like image 200
Pasan Ratnayake Avatar answered Oct 04 '22 04:10

Pasan Ratnayake


If you want to focus on demand then ui-select offers event broadcast support also. You need to put broadcast event name in focus-on attribute of ui-select and brodcast that event by $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>

Call $scope.$broadcast('UiSelectDemo1'); from button click or any other trigger/event.

Example taken from here.

like image 41
Farhan Ghumra Avatar answered Oct 04 '22 06:10

Farhan Ghumra