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:
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>
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?
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.
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
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With