Jyotirmoy Pan
Jyotirmoy Pan

Reputation: 857

Angular UI Drop down scope variable updated from directive does not update the scope

I have written a directive that updates a scope variable based on the key pressed. The code works fine for me but the variable does not get updated till focus is put back on the dropdown or pulled off. Below is the html and the directive code:

<button type="button" drop-select ="card.purchaseType">{{card.purchaseType}}</button>

 appModule.directive('dropSelect', function() {
   return {
     scope: {
       purchaseType:'=dropSelect'
     },
     link: function(scope, element, attrs){
       var items =["Retail Purchases","Prescription Purchases", "Retail and Prescription Purchases"];
        element.on('keyup', function(e){
          // Get the character pressed
          var stringChar = String.fromCharCode(e.keyCode), currentItem = scope.purchaseType;
          for(var itemCount = 0; itemCount < items.length; itemCount++){
            if(stringChar == items[itemCount].charAt(0) &&
              currentItem != items[itemCount]){
              scope.purchaseType = items[itemCount];
            }
          }
        });
     }
   }
 })

Upvotes: 0

Views: 107

Answers (1)

Narain Mittal
Narain Mittal

Reputation: 1160

Try element.on('keypress') instead of a keyup

Upvotes: -1

Related Questions