Can any one provide me reference to angularjs dropdown with action links as shown in the image? From the action list if we mouse over on any lable separate action list should be shown out. Please see the attached screen shot for reference. I should be able to have part2 also as shown in the image. The official Angularjs UI Bootstrap dropdown menu (ui.bootstrap.dropdown) provides only one list of actions (part1 from the image)
As of now I have used the following normal code which is working fine :
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
Save Options <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href ng-click="saveFilter(ui3DataSet)">Save Filter</a></li>
<li><a href ng-click="saveAsFilter(ui3DataSet)">Save Filter As</a></li>
</ul>
</div>
But now when I mouse over saveFilter(ui3DataSet), another list should be shown on the right side. I am looking for any Angularjs plugin provides this feature readily.
As per #Dmitri Zaitsev, the following solves the issue:
<li class="dropdown-submenu">
<a href ng-click="saveAsFilter(ui3DataSet)">Others</a>
<ul class="dropdown-menu">
<li> One </li>
<li> two </li>
</ul>
</li>
Here is a pure Bootstrap implementation:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3#comments
You could wrap it into Angular directive if you want to (see e.g. the implementation of jQuery Passthrough by UI Utils).
Also other threads that might be of help/related:
Dynamically creating nested navigation menu item using Bootstrap and Angularjs
AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive
Angular UI multi-level Dropdown Toggle
Related
Is it possible to split this ng-repeat loop in angularjs? I have a set of tabs and the data is found in workspace in workspaces. I want to basically check a condition ng-if "savedSettings=='account'", show specific tab. ng-if"savedSettings=='shelf'" show tab. How can I work this conditional render in?
There are four tabs found in this workspace.
<li ng-repeat="workspace in workspaces" class="workspace.activeclass">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
Use the ng-show directive:
<li ng-repeat="workspace in workspaces"
class="workspace.activeclass"
ng-show="workspace.tabid == savedSetting">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
For more information, see
AngularJS ng-show Directive API Reference
I'm learning Angular JS.
I have my angularjs component whose HTML template consists of Bootstrap's Dropdown component plus a message <div>:
<div class="dropdown-container">
<div id="messageDiv"></div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
This is straight from Bootstrap: http://getbootstrap.com/components/#dropdowns
I would like my #messageDiv to have text "Dropdown is open" when the dropdown is open and "Dropdown is closed" when dropdown is closed. How can I achieve this "the Angular way"?
I strongly recommend you to not reinvent the wheel and use the Angular UI Bootstrap.There you can find the dropdown directive. Then u can manage state of the dropdown directive using isOpen property binding and show/hide #messageDiv based on that property.
You can track if the dropdown opens and closes with events. Bootstrap provides a javascript file that you need to include and it also requires jquery. I made a working Plunker here: https://plnkr.co/edit/pE7bMI?p=preview
Once you include jquery, and bootstrap's js file you can track the events like this:
$scope.dropdownOpen = false;
// get a reference to your dropdown parent (in your case the <div class="dropdown>" line)
var dropdown = angular.element('#myDropdown');
dropdown.on('show.bs.dropdown', function(event) {
$scope.dropdownOpen = true;
$scope.$evalAsync();
});
dropdown.on('hide.bs.dropdown', function(event) {
$scope.dropdownOpen = false;
$scope.$evalAsync();
});
Why is $scope.evalAsync() in there?
Since angular.element is an alias for jqlite or jquery we are actually binding outside of angular. It doesn't know about the change so we need to tell the scope that something has changed.
I want to use the bootstrap dropdown from the angular ui lib.
I'm getting an issue when I append the dropdown to another DOM element with dropdown-append-to (even dropdown-append-to-body is not working).
I can't have it working only when I use is-open with ng-click to trigger the dropdown.
I reproduced the issue in this plunker.
I'm using bootstrap 3.3.6, angular ui 2.1.3 and angular 1.5.8.
Hope somebody can help me.
You should work with uib-dropdown-toggle and also add an ng-click and toggle test at your controller
Also, dropdown-append-to-body should accept a value (default is false), like so dropdown-append-to-body="true"
<div class="btn-group" uib-dropdown dropdown-append-to-body="true" is-open="test">
<button type="button" ng-click="onClick(test)" class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<!-- list items -->
</ul>
</div>
exmaple plunk
Trying to do something like this
angular.element('.header').addClass('original').clone().insertAfter('.header').addClass('cloned').css('position', 'fixed').css('top', '0').css('margin-top', '0').css('z-index', '500').css('padding-top', '15px').css('padding-bottom', '16px').removeClass('original').hide();
angular.element('.cloned').show();
angular.element('.original').css('visibility', 'hidden');
angular.element('.original').addClass('orginal-header');
And it creates a clone of my header for a sticky header solution, but then I notice the directives I have on a link in the header i.e. a help link which opens/closes a popup menu no longer works.
I.e In my header I have this
<div class="dropdown pull-right" dropdown on-toggle="toggled(open)">
<a class="btn btn-default btn-menu dropdown-toggle" href dropdown-toggle> Help? </a>
<ul class="dropdown-menu">
<li><a ui-sref="help">Get Help?</a></li>
<li><a href open-support-modal>Report an Issue</a></li>
</ul>
</div>
I have a click event on dropdown-toggle which no longer triggers on the copied header.
Any ideas ?
Since you are modifying the DOM, you have to inform angular that it needs to take a second look at things. That's what the $compile service is for. Add this code after your cloning code:
var element = angular.element(".cloned");
$compile(element.contents())(scope);
I'm creating a sitemap in a custom CMS powered by Angular.
I hide the lower levels of pages and toggle their visibility with a button. I add ng-animate to animate the "opening" of the lower levels of the sitemap.
This works fine for the <ul>, but I would rather have its child <li> enter with a longer transition-delay for every item for a nice waterfall effect and this is where I get stuck.
At first I figured simply adding a transition-delay to the <li> would be sufficient, but for whatever reason I'm even unable to add a regular transition to the <li>. I read about the -stagger class, but it never gets applied.
Markup:
<ul>
<li ng-repeat="page in data"
ng-class="{'children-visible': isVisible}"
ng-init="isVisible = false">
{{page.pagename}}
<button ng-if="page.sub"
ng-click="$parent.isVisible = !isVisible">
</button>
<ul ng-if="page.sub"
ng-show="isVisible"
ng-animate="'animate'">
<li ng-repeat="page in page.sub">
{{page.pagename}}
</li>
</ul>
</li>
</ul>
Here's a picture of the markup if it helps you, er, picture it:
If relevant, I use version 1.2.16 of both angular.js and angular-animate.js.
So, in short: How do I add a stagger/transition delay to children of an element with ng-show?