I have a menu of nageção that works perfectly the class when clicking the option corespondente. Inside this page that opens when clicking on the menu there is a button that leads to another page, after clicking the menu loses the active class. How do I indicate that I'm still in that session.
First page working .. but clicking the button ..
the menu does not remain active
HTML
<li ng-class="{active: 'home.produtos'}">
<a href="">
<i class="fa fa-fa-briefcase"></i>
<span class="nav-label">Produtos</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse" ng-class="{in: $state.includes('home.produtos','home.etiquetas','home.etiquetasview')}">
<li>
<a ui-sref="home.produtos">Produto</a>
</li>
<li ui-sref-active-eq="active">
<a ui-sref="home.etiquetas">Etiqueta</a>
</li>
</ul>
</li>
Button in page
<a ui-sref-active-eq="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
<a ui-sref-active="active" ui-sref="home.etiquetasview({id:{{item.codigo}}})" class="btn btn-white btn-sm">
<i class="fa fa-eye"></i> View
</a>
May be this Can Help You Angular-ui-router: ui-sref-active and nested states
Related
I am unable to use up and down arrow buttons to focus on the drop down menu.
In my application, we are using angularjs.
Here is my code:
<div class="dropdown dropdown-eq2 form-group" dropdown>
<button class="btn dropdown-toggle" dropdown-toggle data-toggle="dropdown">
<span class="icon-e_icon_expand pull-right" style="margin-left: 5px;"> </span>{{personObj.type}}
</button>
<ul class="dropdown-menu num-of-views" role="menu" dropdown-menu>
<li role="presentation" ng-repeat="type in categoryArray">
<a role="menuitem" tabindex="-1" href="" ng-click="setSelectedType(type)"> {{type}}</a>
</li>
</ul>
</div>
Angular UI dropdown don't support UP/DOWN keyboard navigation's.
You can build custom directive on top of this will full fill your requirement.
You can refer this link Navigate the UI using keyboard
<li>
<a href="javascript:;">
<i class="fa fa-file-excel-o" ng-click="export()"></i> Export to Excel </a>
</li>
Here is the click function, but it is not working properly.
<li>
<a href="javascript:;">
<i class="fa fa-file-excel-o" ng-click="export()"></i> Export to Excel </a>
</li>
I think your anchor tag is doing the trick.
use href="javascript:void(0)" else don't use href
If it is not working, then use div or span, instead of anchor tag
Put ng-click on whole li item:
<li ng-click="export()">
<a href="javascript:;">
<i class="fa fa-file-excel-o"></i> Export to Excel
</a>
You are not obviously not clicking on the element.
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.
Hu guys,
I have a problem when I want to click on a link that is in list on html page. Here is my html:
<h3>{{snapshot.contractKey}} </h3>
<ul class="nav nav-pills nav-stacked">
<li><a id="documentLink" href="" ng-click="checkAndRedirect('/document1/')"><span translate="contractDetail.document1"> Document</span> <i class="fa fa-file-text"></i></a></li>
<li class="active"><a id="detailsLink" href="" ng-click="checkAndRedirect('/document2/')"> <span translate="contractDetail.document2"> Details</span> <i class="fa fa-list-ul"></i></a></li>
<li><a id="revisionsLink" href="" ng-click="checkAndRedirect('/document3/')"> <span translate="contractDetail.document3"> Revisions </span> <i class="fa fa-exchange"></i></a></li>
<li><a id="auditTrailLink" href="" ng-click="checkAndRedirect('/document4/')"> <span translate="contractDetail.document4"> Audit Trail</span> <i class="fa fa-tasks"></i></a></li>
<li><a id="actionHistoryLink" href="" ng-click="checkAndRedirect('/document5/')"> <span translate="contractDetail.document5">Action History </span> <i class="fa fa-clock-o"></i></a></li>
</ul>
When I want to click on a link by its ID in protractor test, error is shown No such element or Element is not visible.
Here is my test line of code:
element(by.id('documentLink')).click();
Do you know why it is bad solution and what do to?
When I do this:
element.all(by.tagName('a')).then(function(results){
expect(results.length).toEqual(5);
});
he returns me that is correct and there are 5 links on page. But when I try to access them by ID, I can not do that?
From your comment, I suggest you to use the onPrepare option in your Protractor config to maximize the browser window before your specs start running:
onPrepare: function() {
browser.driver.manage().window().maximize();
}