使用AngularJs加载页面时打开下拉选项

时间:2015-03-30 10:14:46

标签: angularjs

我正在使用Angularstrap选择框来渲染值。但我需要在单击选项卡时自动打开(自动对焦)下拉列表。(下拉列表是第一个字段)

我尝试使用tabindex =“1”但没有运气。

<button type="button" 
        class="btn btn-default" 
        data-ng-model="searchtype" 
        data-html="1" 
        ng-options="searchvalue as searchvalue for searchvalue in searchon" 
        placeholder="{{'myactivityqueue.form.searchon.placeholder' | translate}}"  
        bs-select tabindex="1">
  Action <span class="caret"></span>
</button>

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,

.directive('focusOn',function($timeout) {

        return {

        restrict : 'A',

        link : function($scope,$element,$attr) {

        $scope.$watch($attr.focusOn,function(_focusVal) {

        $timeout(function() {       
        _focusVal ? $element.focus() :  
        $element.blur();

        });

        });

        }

        }

        });

在模板文件中,

<button type="button" class="btn btn-default searchType" data-ng-model="searchtype" data-html="1" ng-options="searchvalue as searchvalue for searchvalue in searchon" placeholder="{{'myactivityqueue.form.searchon.placeholder' | translate}}"  bs-select tabindex="1" focus-on="focusInput">
                      Action <span class="caret"></span>
                    </button>

并在控制器中,

            //setting boolean value for autofocus dropdown 
            $scope.focusInput = true;