Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Best (most efficient) way to show dynamic options menu in angularjs

Tags:

angularjs

Let's say we have many items in the UI. When a user clicks an item, the UI should present a popup/dialiog/overlay element with some options, actions and etc.

Currently I see two options:

  1. Duplicate the overlay element for each item and hide it until associated item is clicked. Like in this fiddle: http://jsfiddle.net/urPww/1/

    <div ng-show="currentItem"> showing options for: {{currentItem.name}} </div> <li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} </li>

  2. Place overlay UI once and keep track wich item was clicked last. Demo: http://jsfiddle.net/aVnPT/5/

    <li ng-repeat="item in items" ng-click="showOptions(item)"> {{item.name}} <span ng-show="item.showingOptions"> <br/>showing options for: {{item.name}} </span> </li>

The first solution is not efficient. Yet I can't figure out a clean way how to show overlay UI besides the clicked element in second one. Any ideas?

like image 906
package Avatar asked Apr 10 '13 14:04

package


People also ask

How to implement menu items in angular?

To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.

What is MD-menu in angular?

Every md-menu must specify exactly two child elements. The first element is what is left in the DOM and is used to open the menu. The second element is the md-menu-content element which represents the contents of the menu when it is open. 10. Angular Boostrap Dropdown Menu Example

What is dropdown menu in Angular 2?

Angular 2 Dropdown Menu Angular 2 dropdown allows the user to select a value from a list of values in toggleable mode. An angular 2 dropdown menu displays a list of clickable links.

How to select any option as a selected option in angular?

In that way, we can select any option as a selected option in Angular. We will discuss how to set a default value from an array of options. First of all, we will create two variables: ngDropdown, the default option for our dropdown, and the second will be ngOptions that will have all the options we want to display in the dropdown options.


1 Answers

You can use a single element by passing in $event as param to your ng-click function. Then can get position of mouse click relative to document

app.directive('container', function () {

    var offset = {
        left: 40,
        top: -20
    }
    return function (scope, element, attributes) {
        var $oLay = angular.element(document.getElementById('overlay'))

        scope.showOptions = function (item,$event) {       
            var overlayDisplay;
            if (scope.currentItem === item) {
                scope.currentItem = null;
                 overlayDisplay='none'
            }else{
                 scope.currentItem = item;
                overlayDisplay='block'
            }

            var overLayCSS = {
                left: $event.clientX + offset.left + 'px',
                top: $event.clientY + offset.top + 'px',
                display: overlayDisplay
            }

             $oLay.css(overLayCSS)
        }
    }
});

Am not sure if angular normalizes clientX and clientY the way jQuery does for different browsers. Not all browsers use same convention for event position properties Have removed ng-show from overlay element so it's style attributes can be controlled from directive, not by angular compiler due to timing, and given it an id.

DEMO: http://jsfiddle.net/jJyTf/

like image 125
charlietfl Avatar answered Nov 15 '22 06:11

charlietfl