Now I want to toggle class with ng-class, but now I am stuck with tab which has sub <a>. Here is Html
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active:isActive('/home')}"><a ui-sref='home'>Home</a>
</li>
<li ng-class="{active:isActive('/ebin'||'/reports')}" class="dropdown">Expenses<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref='ebin'>My Expenses</a>
</li>
<li><a ui-sref='reports'>Expense Reports</a>
</li>
</ul>
</li>
<li ng-class="{active:isActive('/settings')}"><a ui-sref='settings' translate="SETTINGS">Settings</a>
</li>
</ul>
JS part:
$scope.isActive = function(route) {
return route === $location.path();
}
The issue I have here is the ng-class only work for /home and /setting, but doesn't work for dropdown menu. any Idea?
The issue is with the parameter you are passing "isActive('/ebin'||'/reports')". This is not a valid string.
What you could do is this:
ng-class="{'active':isActive('/ebin'), 'active':isActive('/reports')}"
Related
I want to call controller method by using #Url.Action in href,
how can we do the same?
<ul id="dvMenuInner" class="nav navbar-nav dropdown">
<li ng-repeat="parent in menu">
<a href="#")}" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true">
</span>{{parent.menuname}}
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu" ng-repeat="child in parent.children">
{{child.menuname}}
<ul class="dropdown-menu">
<li ng-repeat="children in child.childrencc"><a ng-repeat="child in parent.children" href="#Url.Action({{children.actionname}},{{children.url}})">{{children.menuname}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Since URL.Action is Razor code and it will execute at server so you can not pass your client side data to it.
either you can do it as follows
<a href="#Url.Content("{{parent.menuname}}"+"/"+"{{parent.actionname}}")">
which will construct the URL controller and action name or you can do it via plain Html way
<a href="{{parent.menuname}}/{{parent.actionname}}">
by any of the above way you can redirect your link to the desired controller+action
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/
Navigation.html contents
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<div ng-include="AnnonymousTopHeaderUrl"></div>
</ul>
</div>
AnnonymousNavigation.html contents
<li>
<a target="_self" href="#Register">Register</a>
</li>
Base Controller is here
myApp.controller("BaseController", ["$scope", function($scope) {
$scope.AnnonymousTopHeaderUrl = "App/Include/AnnonymousNavigation.html";
}]);
When I run the code, it shows below Html
<ul class="nav navbar-nav navbar-right">
<!-- ngInclude: AnnonymousTopHeaderUrl -->
<div ng-include="AnnonymousTopHeaderUrl" class="ng-scope">
<li class="ng-scope">
<a target="_self" href="#Register">Register</a>
</li>
</div>
</ul>
I was expecting below Html
<ul class="nav navbar-nav navbar-right">
<li>
<a target="_self" href="#Register">Register</a>
</li>
</ul>
Is there any way to get the expected Html?
You should just place ng-include directive over ul element, so that it will not create unnecessary div element inside ul.
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<ul class="nav navbar-nav navbar-right" ng-include="AnnonymousTopHeaderUrl">
</ul>
</div>
I have a HTML code as mentioned below with UL tag, and I wanted to click the UL tag Manage -> Channel using Selenium Webdriver. To do that I have written the below code in java but it is not working, infact no error is throwing but page is getting opened. Please help.
HTML
<ul class="adb-primary_nav--items adb-layout-default">
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link en" href="../">
<img class="adb-primary_nav--image" src="https://d33na3ni6eqf5j.cloudfront.net/marketplace_logo/img1474715110198223685.png?7ef040694410736c21450bea763bb661" alt="Vodafone Group">
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="myapps" href="../myapps">
MyApps
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="shop" href="../home">
Marketplace
</a>
</li>
<li class="adb-primary_nav--item"><a class="adb-primary_nav--link" id="developer" href="../cms/home">Developer</a></li>
<li class="adb-primary_nav--item js-drainable-menu">
<div class="adb-context_menu adb-js-context_menu">
<a id="manage" class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link admin-item selected" role="button" tabindex="0">Manage</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" href="../corporate/home">Corporate</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content selected" href="./marketplace">Channel</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" id="account" href="../account/home">Account</a></li>
</ul>
</div>
</div>
</li>
<li class="adb-primary_nav--item adb-primary_nav--item__right">
<div class="adb-context_menu adb-js-context_menu" data-placement="right">
<a class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link" role="button" tabindex="0">testchannel user</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myProfile" href="../profiles/5944276">My Profile</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myCompany" href="../companies/219288">My Company</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="mySettings" href="../settings">My Settings</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="logout" href="../logout">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
Java Code
Configuration_file var = new Configuration_file();
System.setProperty("webdriver.chrome.driver", "C:\\Users\\gur29175\\workspace\\SAAS\\jars\\chromedriver.exe");
WebDriver firefox_dri = new ChromeDriver();
firefox_dri.get(var.env_URL + "/home");
firefox_dri.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS);
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
driver.findElement(By.xpath("//a[#id='manage']")).click()
driver.findElement(By.xpath("//ul[#class='adb-stack']/li[2]")).click()
In case of a listbox, you need to get the list of elements and iterate over it to choose the required element.
Please share the screenshot of the page with dropdowns. Will be able to guide you with the code.
You can replace
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
with
firefox_dri.findElement(By.linkText("Channel")).click();
Try it
//ul[#class='adb-stack']/li[#class='adb-stack--item']/a[contains(text(),'Corporate')].click();
Currently I have two tabs, that I can open by clicking either, but I'd like the first one to be opened by default..
<ul class="nav nav-tabs">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>
<div ng-show="activeTab=='implementation'" >
<h4>test heading</h4>
</div>
<div ng-show="activeTab=='videos'">
<h4>test heading</h4>
</div>
Any suggestions?
What about just initializing activeTab?
<ul class="nav nav-tabs" ng-init="activeTab = 'implementation'">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>