I have a list of tabs, I want to know my current location for every time I click specific tab, I want my MainCTRL which is the father of all tab controllers to know which tab is active now.
I have tried to use ng-click event and using service such $location.path() to get current path. But first I get the previous path and not the current path.
I added the code below for demonstration and also a codepen:
http://codepen.io/Barak/pen/wGPpoZ
Why I need such feaure, because I want some common buttons of the header to be disable for specific group of the tabs and active for the other part of the tabs.
var app = angular.module('app',[]);
app.controller("MainCTRL",["$scope","$location", function($scope,$location){
$scope.title = "Hello World";
$scope.onWhichPageIAM = function(){
console.log("He click me");
console.log("location:",$location.path());
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<nav id="tabs_navbar" class="navbar-collapse collapse" ng-app="app" ng-controller="MainCTRL">
<ul class="tabs">
<li class="tabs-item">
Analytics Summary
</li>
<li class="tabs-item">
TDCG
</li>
<li class="tabs-item">
Key Gas
</li>
<li class="tabs-item">
Duval Triangle
</li>
<li class="tabs-item">
Duval Pentagon
</li>
<li class="tabs-item">
NEI
</li>
<li class="tabs-item">
PTX
</li>
<li class="tabs-item">
Gas Trends
</li>
<li class="tabs-item">
Data Table
</li>
<li class="tabs-item">
Playground
</li>
<li class="tabs-item">
Analytics Settings
</li>
</ul>
</nav>
There's no need for a ng-click, you can use the $routeChangeSuccess (#Daniel Beck suggestion) signal broadcasted on the $rootScope, use it like this:
app.controller("MainCTRL",['$rootScope', "$scope","$location", function($rootScope, $scope,$location){
$rootScope.$on('$routeChangeSuccess', function(ev, current, previous) {
console.log("State change success");
console.log("location:", current); // info referent to the current state.
});
}]);
You can use the $state variable to get the active tab.
<div class="btn-group">
<button class="btn btn-primary btn-sm" uib-btn-radio="'mytabs'" ui-sref-active="active" ng-model="ActiveChild" ui-sref="tab1">FirstTab</button>
<button class="btn btn-primary btn-sm" uib-btn-radio="'mytabs'" ui-sref-active="active" ng-model="ActiveChild" ui-sref="tab2">SecondTab</button>
</div>
And use $scope.ActiveChild = $state.current.name; in your controller.
$state.current.name; should give you name of the active tab.
Related
I am creating a webpage using smart admin.I am getting left menu datas from an array.I need display menus and sub menus properly based on parent Id of each data using angular. But I don't know how to do it.Can anyone help me?please.
Script:
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http', function ($scope, $http) {
$scope.Menus = [];
$http.get('/list/GetSiteMenu').then(function (data) {
$scope.Menus = data.data.data.record;
}, function (error) {
alert('Error');
});
}]);
Html:
<nav ng-repeat="menuData in Menus">
<ul>
<li>
<ul>
<li><a></a></li>
</ul>
</li>
</ul>
</nav>
console.log($scope.Menus) will be in this format:
Need to iterate over menuData.menu_roles
<nav ng-repeat="menuData in Menus">
<ul>
<li>
<ul>
<li ng-repeat ="subMenu in menuData.menu_roles">
<a></a>
</li>
</ul>
</li>
</ul>
</nav>
You can use something like this according to your json
Use rootscope instead of scope to store Menus
<section class="sidebar">
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="{{menuItem.LiCssClass}}" ng-repeat="menuItem in $root.menuList" ng-class="{active:isActive('{{menuItem.NavigationURL}}')}">
<a ng-href="{{menuItem.NavigationURL}}" ng-click="sidebar()">
<i class="{{menuItem.ICssClass}}"></i>
<span class="{{menuItem.SpanCssClass}}"> {{menuItem.DisplayName}}</span>
<i class="{{menuItem.TreeViewIcon}}"></i>
</a>
<ul class="{{menuItem.UiCssClass}}">
<li id="{{subMenuItem.TagName}}" ng-repeat="subMenuItem in menuItem.SubMenu" ng-class="{active:isActive('{{subMenuItem.NavigationURL}}')}">
<a ng-href="{{subMenuItem.NavigationURL}}">
<i class="{{subMenuItem.ICssClass}}"></i><span>{{subMenuItem.DisplayName}}</span>
</a>
</li>
</ul>
</li>
</ul>
</section>
You can use ng-bootstrap-submenu
https://www.npmjs.com/package/ng-bootstrap-submenu
It's a module for add submenus items to parent menu items and it's easy to use
I have this code,
<li class="centro-de-servicios col-md-3 col-xs-12 dropdown dropdown-toggle" data-toggle="dropdown">
<i class="icon-centro-de-servicios"></i>
Service Center <i class="arrow-down"></i>
<ul class="submenu dropdown-menu">
<li>Start</li>
<li>About Us</li>
<li>Our Policies</li>
<li>Maintenance</li>
<li>Quote a Visit</li>
<li>Service Tickets</li>
<!--<li></li>-->
<li>Advice</li>
<li>Contact</li>
</ul>
</li>
When i'm positioned on any element, and try to go to another page, the page is just refreshing, not changing. This happens only on Edge and IE.
I tried "window.location.href = 'url'", "location.href = 'url'", "location= 'url'", "location.replace('url')", etc, and there are not working, if a put a target blank it works, but i don't want the target blank.
You didn't close the url and put extra page="" in it.
Try it like this:
<li onclick = "location = 'http://beta.capris.cr/servicios/?page=centro-de-servicios§ion=centro-de-servicios'">Start</li>
EDIT:
Have a look at this code on your page:
jQuery(".submenu a").click(function () {
jQuery(location).attr(jQuery(this).attr("href"));
location.reload();
// setTimeout(function () {
// updatePage(currentPage, location.hash);
// }, 10);
});
I need to set the just previous state inside the anchor tag while navigating the menu. Here is my code:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref=".profile">College Profile</a></li>
<li ui-sref-active="active"><a ui-sref=".stream">College stream</a></li>
<li ui-sref-active="active"><a ui-sref=".dept">College Department</a></li>
<li class="dropdown " ui-sref-active="active">
<a ui-sref="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Resource Management <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="#">Add User Role</a></li>
<li><a ui-sref="#">Add Course</a></li>
<li><a ui-sref="#">Add Section</a></li>
<li><a ui-sref="#">Add Session</a></li>
<li><a ui-sref="#">Add Semester</a></li>
<li><a ui-sref="#">Add Unit</a></li>
</ul>
</li>
<li ui-sref-active="active"><a ui-sref=".usermanagement">User Management</a></li>
<li ui-sref-active="active"><a ui-sref=".role">User Role</a></li>
</ul>
</div>
In this code I need when user will click on "Resource Management" menu. This menu will active and other menus will not active (here I am using active class for highlight the menu) and will show the just previous state page.
As it has some sub menus these sub menus will display in dropdown list. In this case all is coming properly but it's throwing the below error and cursor:pointer property also not coming on this menu.
Error:
Error: Could not resolve '#' from state 'dashboard'
at Object.t.transitionTo (angularuirouter.js:7)
at Object.t.go (angularuirouter.js:7)
at angularuirouter.js:7
at angularjs.js:146
at e (angularjs.js:43)
at angularjs.js:45
ui-router doesn't track the previous state once it transitions, but the event $stateChangeSuccess is broadcast on the $rootScope when the state changes.
You should be able to catch the prior state from that event ("from" is the state you're leaving):
app.run(['$rootScope',function($rootScope)
{
$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
$rootScope.previousState = from.name;
$rootScope.currentState = to.name;
console.log('Previous state:'+$rootScope.previousState)
console.log('Current state:'+$rootScope.currentState)
});
}]);
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
I'm writing a module that will create a dynamic menu on the fly. How to run a directive after adding new <li> with css class dropdown which is also added by ng-class.
The code:
angular.module('myapp', ['ui.bootstrap'])
.factory("menuService", ["$rootScope", function($rootScope) {
"use strict";
return {
menu: function() {
$rootScope.globalMenu;
},
setMenu: function(menu) {
$rootScope.globalMenu = menu;
}
};
}])
.controller("MainController", ["$scope", "menuService",
function($scope, menuService){
menuService.setMenu([{href:"#", label:"Dropdown",
dropdown:[{href:"/edit", label:"Edit"}]},
{href:'/', label:'test'}]);
$scope.bodyText = "Some text";
}]);
This is the code in html
<ul class="navbar-nav nav navbar-left">
<li ng-repeat="menu_element in globalMenu" ng-class="{dropdown: menu_element.dropdown != undefined}">
<a ng-href="{{menu_element.href}}" ng-class="{'dropdown-toggle': menu_element.dropdown != undefined}">
{{menu_element.label}}
<b class="caret" ng-if="menu_element.dropdown != undefined"></b>
</a>
<ul ng-if="menu_element.dropdown != undefined" class="dropdown-menu">
<li ng-repeat="sub_element in $parent.menu_element.dropdown">
<a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
</li>
</ul>
</li>
</ul>
Link to plunker:
http://plnkr.co/edit/pgH35mmsjLJqV4yJuSYq?p=preview
So what I want to do is the same or similar as for jQuery, there I would run $("li.dropdown").dropdown() after adding whole ul>li blocks. I'm new to Angular and I want to make this in the angular way.
I read about directives, how to use them. But I couldn't find how to apply directive in runtime. I've read about transclude: element in a directive (ui.bootstrap.dropdownToggle) doesn't have it enabled. I'm sure that there is a easy way, but couldn't find it myself...
Solved!
I've finally made it with ng-if and ng-repeat-start. With help in comments, I've found that ng-class does not run directives.
<ul class="navbar-nav nav navbar-left">
<span ng-repeat-start="menu_element in globalMenu"></span>
<li ng-if="menu_element.dropdown !== undefined">
<a ng-href="{{menu_element.href}}" class="dropdown-toggle">
{{menu_element.label}}
<b class="caret" ></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="sub_element in $parent.menu_element.dropdown">
<a ng-href="{{sub_element.href}}">{{sub_element.label}}</a>
</li>
</ul>
</li>
<li ng-if="menu_element.dropdown === undefined">
<a ng-href="{{menu_element.href}}">
{{menu_element.label}}
</a>
</li>
<span ng-repeat-end></span>
</ul>
Working example on Plnkr. Something happened with the css on Plunker, yesterday it was working... but still it works.
Nice, this helped me along the way. I've a slight variation on your theme.
<ul class="nav navbar-nav">
<li ng-repeat='link in menu track by $index' ng-class='[{dropdown:link.sub}]'>
/* normal menu */
<a ng-if='!link.sub' ng-bind='link.id' ng-click='jump(link.to)'></a>
/* dropdown menu */
<a ng-if='link.sub' class="dropdown-toggle" data-toggle="dropdown">
<span ng-bind='link.id'></span>
<ul class="dropdown-menu inverse-dropdown">
/* and repeat for the submenu */
<li ng-repeat='slink in link.menu track by $index'>
<a ng-bind='slink.id' ng-click='jump(slink.to)'></a>
</li>
</ul>
</a>
</li>
</ul>
My menu array is a list of
{id:'name', to:n}
where n points to an array listing some html I push into the page. When there is a sub menu the menu array element is
{id:'name', sub:true, menu:[{id:'name', to:n}, etc.]}
I tried ui-bootstrap but never got my head around it.