CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
user944513
user944513

Reputation: 12729

how to open dropdown in angular js?

can we open the dropdown when it focus using tab keyword .I want to open the drop down while using tab navigation .

Example if I am in input field (focus to input field ) then if I press tab focus goes to button then drop down , here I want to open the drop down here is my code http://codepen.io/anon/pen/RGKKrd?editors=1010

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {
            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                   // evt.preventDefault();
                }
            });
        }
  }
})

Upvotes: 0

Views: 2965

Answers (2)

Nishant123
Nishant123

Reputation: 1966

You cannot programmatically open a select

See here and here

If you are looking for a workaround here is something I have made. Navigate to the select box with tab key and select your option. The select will stay open as long as it is in focus. It closes on focusout

Here is the directive

angular.module('app',[ ]).directive('abc',function(){
  return {
        restrict: 'EA',
        link: function (scope, element ,attr) {

            element.on('keyup', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",length);
                  //element.attr("size",0);
                }
            });

            element.on('keydown', function (evt) {
                if (evt.which ===9) {
                  var length = element.find("option").length;
                  element.attr("size",0);
                  //element.attr("size",0);
                }
            });

        }
  }
})

Not the best solution, but close to what you are looking for.

Upvotes: 1

Viplock
Viplock

Reputation: 3319

You Can not do it, But there is some work around kind of code you can go with. You can change your Js code like this.

  angular.module('app',[ ]).directive('abc',function(){
   return {
    restrict: 'EA',
    link: function (scope, element ,attr) {
        element.on('keydown', function (evt) {
          if (evt.which ===9) {
            //debugger;
            if(document.activeElement.localName==="select"){
                        angular.element(document.activeElement).attr("size",1);
             }
            if(document.activeElement.nextElementSibling!==null && document.activeElement.nextElementSibling.localName==="select"){
            angular.element(document.activeElement.nextElementSibling).attr("size",document.activeElement.nextElementSibling.childElementCount);
            }

            }
        });

    }
  }
 })

This is not a proper solution , just a workaround

Upvotes: 0

Related Questions