<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.
Related
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
I need to open the dropdown when clicking on link with angularjs. my idea is to add the class open to the dropdown with ng-class directive but this is not working .
I have two dropdown menu, what i need is to open the second one when clicking on the link within the first one
<ul class="nav navbar-nav navbar-right " >
<li class="dropdown" ng-class="myDropdown ? : 'open'">
<a class="dropdown-toggle" data-toggle="dropdown" >Menu</a>
<ul class="dropdown-menu " role="menu" ng-if="!myDropdown">
<li>
Open second dropdown
</li>
</ul>
<ul class="dropdown-menu " role="menu" ng-if="myDropdown">
<li >
Go back
</li>
</ul>
</li>
</ul>
Typescript
toogleDropDown() {
this.scope.myDropdown = true;
}
This won't work since you toggleDropDown is a function and it does not return anything !undefined should be true I think so your line:
Go back
is same as writing:
Go back
overall there's no need for that function at all what you need is something like this:
<a href="" ng-click="myDropdown=!myDropdown">
<span ng-if="!myDropdown">Open second dropdown</span>
<span ng-if="myDropdown">Go back</span>
</a>
and remove that function from your controller there's no need for it.
also I believe you wanted to set up ng-class like this:
<li class="dropdown" ng-class="{'open': myDropdown}">
Here's fiddle: https://jsfiddle.net/pegla/nq11093m/1/
angular.module('myApp')
.component('sideNav', {
controller: function SideNavController($scope) {
$scope.navigation = {};
$scope.click = function(key) {
$scope.navigation[key] = !$scope.navigation[key];
}
},
templateUrl: 'components/side-nav/side-nav.html',
})
to be used as simply
<side-nav></side-nav>
The template is
<!-- other li items -->
<li ng-init="navigation.charts = false"
ng-click="click('charts')">
<a href="#">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
</li>
navigation.charts is correctly initialized to false and hence the li > ul is hidden. Clicking the top level li item updates the navigation object but the view does not update. I was expecting the li > ul element to get displayed.
Plunkr: https://plnkr.co/edit/UJpdFErwVUzsCd65hlW0?p=preview
Clicking on the link reloads the page and re-initializes the directive. Try modifying to:
<li ng-init="navigation.charts = false"
ng-click="$event.preventDefault(); click('charts')">
You can actually add href="javascript:void(0)"
<ul>
<li ng-click="click('charts')">
<a href="javascript:void(0)">
<i class="fa fa-bar-chart-o fa-fw"></i>
Charts {{ navigation.charts }}
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
ng-show="navigation.charts">
<li>
Charts
</li>
<li>
Graphs
</li>
</ul>
This actually happens as you put href="#" which I think refresh the page.
The CSS selector I'm using is
#menu-container > div.navbar-collapse.collapse.bs-navbar-collapse > ul:nth-child(1) > li.dropdown.open > ul > li:nth-child(1) > a > span.menu-label
Is there a way to make it shorter?
HTML
<div id="menu-container" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">SmartStudio</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Save</span>
<span class="pull-right">⌘ S</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Fonts</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Publish</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Undo</span>
<span class="pull-right">⌘ Z</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Redo</span>
<span class="pull-right">⇧ ⌘ Z</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Cut</span>
<span class="pull-right">⌘ X</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Copy</span>
<span class="pull-right">⌘ C</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Paste</span>
<span class="pull-right">⌘ V</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span> its too long to use in code. Is there a way to make it shorter in selenium web driver?
<span class="menu-label">Paste in Place</span>
<span class="pull-right">⇧ ⌘ V</span>
</a>
</li>
<li class="divider"><span></span></li>
<li class="dropdown-submenu">
<a>
<span class="pull-left"></span>
<span class="menu-label">Arrange</span>
</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring to Front</span>
<span class="pull-right">⇧ ⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring Forward</span>
<span class="pull-right">⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send Backward</span>
<span class="pull-right">⌘ ↓</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send to Back</span>
<span class="pull-right">⇧ ⌘ ↓</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Panels</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Off Page Dimming</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Panel</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Project</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Properties</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Design</span>
</a>
</li>
</ul>
</li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Help</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Support Resources</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Rate Us</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Suggest a Feature</span>
</a>
I think you've got several options... I'll list a couple that you can try and see if they work for you.
The super simplest way is to use the link text of the menu and then the submenu items. It may or may not work... one issue may be the uniqueness of the "Help" link on the page, there may be more than one. It looks like you will have to click the Help menu to expose the submenu that contains the "Support Resources" link.
String menuName = "Help";
String submenuName = "Support Resources";
driver.findElement(By.linkText(menuName)).click();
driver.findElement(By.linkText(submenuName)).click();
If that doesn't work, this should... or at least point you in the right direction. You will need to loop through the menus looking for the correct link text, click on it exposing the submenu, loop through the submenus looking for the correct link text, and then click on it.
String menuName = "Help";
String submenuName = "Support Resources";
List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container > div > ul.nav.navbar-nav > li.dropdown"));
// List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container li.dropdown")); // possible shorter alternative
for (WebElement menu : menus)
{
if (menu.getText().equals(menuName))
{
menu.click();
List<WebElement> submenus = menu.findElements(By.cssSelector("span.menu-label"));
for (WebElement submenu : submenus)
{
if (submenu.getText().equals(submenuName))
{
submenu.click();
break;
}
}
break;
}
}
This is impossible to figure out for sure without seeing the HTML you're referring to. However, it looks like you may be able to get away with this:
#menu-container span.menu-label
It looks like you're acquainted with the > operator, which selects a direct child of an element. The operator (a space) selects any descendant of an element.
This only works if there are no other spans with a class of menu-label inside of the element with the ID of menu-container. I'm assuming this is the case.
If you want a more certain answer, you'll need to provide a complete HTML file.
EDIT: Okay, now that you've provided your HTML, it's very clear what the problem is: your HTML is using styling classes, but no descriptive classes. You have two choices: adding more specific classes to your HTML elements, or just dealing with your very long selector. There are no other options.
Of course, if you choose the second option, you should store that CSS selector in a variable to give it a useful name, make it reusable, and make it easy to change when needed.
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();
}