What am I missing here? I'm getting the data from an api using angularjs. This is the working code.
https://jsfiddle.net/gj9sqp2t/
<li>
<div class="icon-link">
<a href="#">
<i class='bx bx-collection'></i>
<span class="link_name">{{item.streamName}}</span>
</a>
<i class='bx bxs-chevron-down arrow'></i>
</div>
<ul class="sub-menu">
<li><a class="link_name" href="#">Category</a></li>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>PHP & MySQL</li>
</ul>
</li>
in this code I'm only converting <li> into <li ng-repeat="item in data" ng-if="dataLoaded"> and dropdown menu simply wont work anymore. It doesn't expand.
Related
I am facing a weird issue with AdminLTE admin panel template which is I am using for my Angular 11 app. Its all loading the menu item. No issue with it. But when clicking an item refreshes the page instead of expanding the group.
Here is how it looks
When I clicking on Data Reconciliation for example, it reloads the page again. Then when I click it again, it expands the group
Here is the markup
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Data Reconciliation
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">Reports</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
What could be the reason? Is this issue have any connection with Angular?
Replace ALL
href="#"
by
[routerLink]=""
This should works.
I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).
To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>.
This results in the nav-pills not being styled right and the previous/next buttons not working properly.
I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.
Any ideas why the class is added to the wrong element and how to prevent it?
Here's my HTML mark-up:
<div id="rootWizard">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li data-target="#step1" class="active">
<a href="#tab1" data-toggle="tab">
<span class="step">1</span>
<span class="title">Title of Step 1</span>
</a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab">
<span class="step">2</span>
<span class="title">Title of Step 2</span>
</a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Title of Step 3</span>
</a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab">
<span class="step">4</span>
<span class="title">Title of Step 4</span>
</a>
</li>
<li data-target="#step5">
<a href="#tab5" data-toggle="tab">
<span class="step">5</span>
<span class="title">Title of Step 5</span>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
This is how I initialize the wizard within the document.ready()-function:
$('#rootWizard').bootstrapWizard({
tabClass: 'bootstrapWizard'
});
I have two sidebar menu Income and Expense. Under each menu there are some sub-menus. I want that whenever I click on Income menu the sub-menus will show under it. But whenever click on Expense the other sub-menus will show under it and Income menu's sub-menu become hide.
But in my website those are overlap each other.
Here is the html
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title
</li>
<li class="nav-item-one">
<a href="" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
<span class="menu-title">Income</span></a>
<ul class="menu-content">
<li>
<a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Income
</a>
</li>
<li>
<a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
<li class="nav-item-two">
<a href="" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
<span class="menu-title">Expense</span></a></a>
<ul class="menu-content-two">
<li>
<a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Expense
</a>
</li>
<li>
<a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
$(document).ready(function($) {
//$('.menu-content').hide();
$(".nav-item-one:has(ul)").click(function(){
('.menu-content-two').hide();
$("ul",this).toggle('slow');
});
//$('.menu-content-two').hide();
$(".nav-item-two:has(ul)").click(function(){
$('.menu-content').hide();
$("ul",this).toggle('slow');
});
});
</script>
this is what you are looking for.
$(".nav-item-one").click(function(){
$('.menu-content-two').hide();
$("ul",this).toggle('slow');
});
//$('.menu-content-two').hide();
$(".nav-item-two").click(function(){
$('.menu-content').hide();
$("ul",this).toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li>
<i class="fa fa-clock-o m-r-10" aria-hidden="true"></i>Title
</li>
<li class="nav-item-one">
<a href="javascript:;" class="waves-effect"><i class="fa fa-user m-r-10" aria-hidden="true"></i>
<span class="menu-title">Income</span></a>
<ul class="menu-content">
<li>
<a href="/income" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Income
</a>
</li>
<li>
<a href="/dailyIncomeReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
<li class="nav-item-two">
<a href="javascript:;" class="waves-effect"><i class="fa fa-table m-r-10" aria-hidden="true"></i>
<span class="menu-title">Expense</span></a>
<ul class="menu-content-two">
<li>
<a href="/expense" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Add Expense
</a>
</li>
<li>
<a href="/dailyExpenseReport" data-i18n="nav.cards.card_bootstrap" class="menu-item">
Daily Report
</a>
</li>
</ul>
</li>
</ul>
</nav>
I'm facing a trouble and I'm not understanding. I have a menu of configurations and a submenu when i click on it.
<li ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
The problem is when I set a ng-if I just can see the configurations menu and when I click on it I got the error "Could not resolve 'javascript:;' from state 'app'".
I know that "javascript:;" this is not defined in my routes file. This means anything specific ? This code wasnt mine and I'm trying to make some changes to control who can see the menu by doing a ng-if like
<!-- configurations -->
<li ng-if="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-if="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
To get the permission group on Controller I had this piece of code
var user = JSON.parse(window.localStorage.getItem("userKey"));
$http.get('/api/organization_permissions_groups/'+user.organization_permission_group_id).success(function (data) {
$scope.permissionGroup = data;
});
You should use ng-show instead of ng-if:
<!-- configurations -->
<li ng-show="permissionGroup.views.configurations" ui-sref-active="active">
<a ui-sref="javascript:;">
<i class="fa fa-cogs"></i>
<span>Configurations</span>
</a>
<ul ng-show="permissionGroup.views.configurations" class="sub-menu">
<li ui-sref-active="active">
<a ui-sref="app.configurations.inventory">
<span>Devices</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.users">
<span>Users</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.networks">
<span>Networks</span>
</a>
</li>
<li ui-sref-active="active">
<a ui-sref="app.configurations.alerts">
<span>Alerts</span>
</a>
</li>
</ul>
</li>
<!-- configurations -->
<div id="wrapper">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse">
<ul class="nav" id="side-menu">
<li>
<a class="active" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Operation <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<i class="fa fa-bar-chart-o fa-fw"> </i> Request<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<i class="fa fa-dashboard fa-fw"></i> Browse
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Add
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Hello,
I have a bootstrap (3) side menu who works great but I can't understand why third level collapse (and with him his parent) on click.
I'd like to prevent his collapse and make it works like the second level.
Any suggestions?
Thanks.