how to get selected element in angular js

Question

I am trying to get selected value of menu option .Actually In my demo when I click button it show menu option I want to get the selected element text when user click any select option from the menu and hide the menu .

How to get the selected item from menu or selected text from menu .First click button it show menu item Then select any element from menu then get the element from menu. http://codepen.io/anon/pen/RPaOQY

   link:function(scope,element,attr){

                $(element).menu();
              $(element).bind('click',function(){
                  alert('--')
                  isMenuVisibles=false;
              })

@Jossef Harush was the fastest. I also suggest to rather set your menu options in your controller (no hardly in your view) and dynamically generate your <li> menu with ng-repeat. — Truche
– Truche, Commented May 15, 2015 at 10:00
thanks but what is the use of $timeout(angular.noop) ..you also give solution — Pallavi Sharma
– Pallavi Sharma, Commented May 15, 2015 at 10:05

Jossef Harush Kadouri · Accepted Answer · 2015-05-15 10:02:26Z

1

Directives designed to integrate with 3rd party libraries (such as jquery-ui menu in your use case)

use the proper convention

nope - <ul custommenu isMenuVisible="isMenuVisible"

good - <ul custommenu is-menu-visible="isMenuVisible"

when using a directive parameters, the case changes in the html and in the definition. read more about it here

Normalization

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase. For example, the following forms are all equivalent and match the ngBind directive:

To sum up,

i would modify your snippet like this:

http://codepen.io/Jossef/pen/eNZobv

html

  <div class="menu" ng-show="isMenuVisible">
    <ul custommenu is-menu-visible="isMenuVisible" selected-menu-item="selectedItem">
      <li class="ui-state-disabled">Aberdeen</li>
      <li>Ada</li>
      ...

js

app.directive('custommenu', function($timeout) {
      return {
        restrict: 'A',
        scope: {
          isMenuVisible: '=',
          selectedMenuItem: '='
        },
        link: function(scope, element, attr) {
          $(element).menu({
            select: function(event, ui) {
              scope.selectedMenuItem = ui.item.text();
              scope.isMenuVisible = false;
              $timeout(angular.noop);
            }
          });

        }
      }
    })

edited May 15, 2015 at 10:02

answered May 15, 2015 at 9:50

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pallavi Sharma Over a year ago

can I use $scope.$apply there ?

Jossef Harush Kadouri Over a year ago

@PallaviSharma. this will answer your question. basically you can replace it with $scope.apply but it will fail if already running and will probably cause you to debug it in the future. your choice :)

Pallavi Sharma Over a year ago

Thanks but what $timeout(angular.noop) is meaning of this line ..when we use this line

Jossef Harush Kadouri Over a year ago

angular.noop is a global empty function equals to function(){} you need to use it if you dealing with events coming from 3rd party integration (such as the click event of the menu) what it does it triggers the $apply and it causes the scope to refresh with the new modifications i strongly suggest you to read [this amazing answer and the comments ](stackoverflow.com/a/18996042/3191896)

Jossef Harush Kadouri Over a year ago

@PallaviSharma its $apply not apply. see this codepen.io/Jossef/pen/pJyBXE

Collectives™ on Stack Overflow

how to get selected element in angular js

1 Answer 1

use the proper convention

Normalization

To sum up,

http://codepen.io/Jossef/pen/eNZobv

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

use the proper convention

Normalization

To sum up,

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related