I have this sidebar.html:
<ul id="menu-sidebar">
<li class="has_sub" ng-repeat="menu in menus | filter: filterTier | filter: filterRole">
<a ng-if="menu.url != '#'" ui-sref="{{ menu.url }}" class="waves-effect" ui-sref-active="active subdrop">
<i class="fa fa-{{ menu.icon }}"></i> <span> {{ menu.name }}</span>
</a>
<a ng-if="menu.url == '#'" class="waves-effect" ui-sref-active="active subdrop" href="#">
<i class="fa fa-{{ menu.icon }}"></i> <span> {{ menu.name }}</span>
</a>
<ul class="list-unstyled" ng-if="menu.sub_menus.length > 0">
<li ng-repeat="submenu in menu.sub_menus">
<a ui-sref="{{ submenu.url }}" ui-sref-active="active">{{ submenu.name }}</a>
</li>
</ul>
</li>
</ul>
And my appController.js:
$scope.menus = [{name: 'Customers', url: 'customers', icon: 'users', tier: 1, role: 1},
{name: 'Settings', url: '#', icon: 'gear', tier: 1, role: 1,
sub_menus: [{name: 'Admin', url: 'settings.admin'}, {name: 'Outlet', url: 'settings.outlet'} ]
}];
Those code above will produce sidebar menu.
Yes above code is worked perfectly.
I've got 2 questions:
As above I need to repeat my <a> tag and hide it manually if it '#' because it always return me an error if I put # or blank inside ui-sref = {{menu.url}}
How can I create my sidemenu only once?. Right now my controller will load the $scope.menus every time the page is loaded (I define it as appController and put it on my body tag so it always return me those menu).
Thanks in advance!
As a tag and ui-router are used for going to a link so of course they will give you error if you don't give address to them.
Try this :
$( document ).ready(function() {
//your code
})/
Related
I'm trying to render a <li> with some ng-zorro tags, I try with innerHTML but when i enter to the page this fails, I want to show differents menu's if the user get in a specific application (route)
I have my JSON like this
menuApp = [
{
"app": "requerimientos",
'menu': '\
<li nz-menu-item nzMatchRouter>\
<a routerLink="/applications/dashboard/requerimientos/crear-pedido">Crear pedido</a>\
</li>\
<li nz-menu-item nzMatchRouter>\
<a routerLink="/applications/dashboard/requerimientos/verificar-pedido">Verificar pedido</a>\
</li>\
'
}
]
and in my HTML
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''">
<div *ngFor="let app of menuApp; index as i">
<ul *ngIf="app.app === activeChild">
<div [innerHTML]="app.menu"></div>
</ul>
</div>
</li>
but when i render the page the <li> print without any ng-zorro tag or class
hope someone can help me
Angular doesn't work that way. Custom directives (like nzMatchRouter) cannot be shoehorned in with an innerHTML. You have to instruct the parser to compile the HTML after it's been added. But even still, there are more efficient, angular-centric methods you can use - like keeping your menu as a simple array of text/url values and using *ngFor to iterate them. That way the <li> directives are compiled at runtime
menuApp = [
{
"app": "requerimientos",
'menu': [
{text: "Crear pedido", url: "/applications/dashboard/requerimientos/crear-pedido" },
{text: "Verificar pedido", url: "/applications/dashboard/requerimientos/verificar-pedido" }
]}
Then your HTML would be like
<li nz-submenu nzOpen nzTitle="Menú {{activeChild}}" nzIcon="appstore" *ngIf="activeChild != ''">
<div *ngFor="let app of menuApp; index as i">
<ul *ngIf="app.app === activeChild">
<li *ngFor="item in app.menu" nz-menu-item nzMatchRouter>
<a [routerLink]="item.url">{{item.text}}</a>
</li>
</ul>
</div>
</li>
I'm using angularjs 1.5.7 in my current project. I use ngTable almost everywhere in this project. Lately I've been asked to change the way we show pagination on top of each table. Our current format:
We want to have:
Here is my code snippet:
<ul class="pagination">
<li ng-class="{'disabled': !page.active}" ng-repeat="page in pages" ng-switch="page.type">
<a ng-switch-when="first" ng-click="params.page(page.number)" href="" translate>TABLE.FIRST</a>
<a ng-switch-when="prev" ng-click="params.page(page.number)" href="" translate>TABLE.PREVIOUS</a>
<a ng-switch-when="next" ng-click="params.page(page.number)" href="" translate>TABLE.NEXT</a>
<a ng-switch-when="last" ng-click="params.page(page.number)" href="" translate>TABLE.LAST</a>
</li>
<li ng-if="params.pages < 2" ng-class="{'disabled':true}" ng-repeat="n in ['«','1','»']">
<a type="button" ng-click="" href="" ng-bind="n"></a>
</li>
</ul>
Unfortunately, I can't get it in order of: First>Prev>Next>Last. What I get instead is:
I was wondering if there is a way to force it to appear in the order I want?
Thanks
Given that there doesn't seem to be any way to sort the pages collection using native properties, you can easily create your own function to do so. Here is an example of a $scope-level function that you can pass to the orderBy directive. It's not the most elegant thing, but essentially I'm converting the text of the page.type to a numeric equivalent to allow orderBy to sort in your desired order.
Update: I added a listing without the orderBy to demonstrate that it really is performing the sort when using orderBy.
angular.module('app', [])
.controller('ctrl', ($scope) => {
$scope.orderPages = (page) => {
switch (page.type) {
case 'first':
return 1;
case 'prev':
return 2;
case 'next':
return 3;
case 'last':
return 4;
}
}
$scope.pages = [{
type: 'last',
text: '>>'
}, {
type: 'first',
text: '<<'
}, {
type: 'next',
text: '>'
}, {
type: 'prev',
text: '<'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Without orderBy:
<ul>
<li ng-repeat="page in pages">{{page.text}}</li>
</ul>
With orderBy:
<ul>
<li ng-repeat="page in pages | orderBy: orderPages">{{page.text}}</li>
</ul>
</div>
I have a Typescript project and had trouble trying to display divider. I posted a question on SO here and received an answer which I believe will work.
However when I tried to implement a ternary on the class I get the error Warning Missing attribute name on both options.
Here is my list item:
<li repeat.for="menu of route.settings.nav" class=${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}>
I am getting the warning on both the "divider" option and the "dropdown-submenu" option. Further with this modification it now wont render the next level of menu items.
Why am I getting a missing attribute warning and how can I make this work..
Background context
Here is the whole navmenu:
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of route.settings.nav" class=${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}>
<a href.bind="menu.href" if.bind="!menu.navSettings.subNav"><span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title}</a>
<a href.bind="menu.href" if.bind="menu.navSettings.subNav" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-${ menu.navSettings.icon }"></span> ${menu.title} <span class="caret-right"></span>
</a>
<ul if.bind="menu.navSettings.subNav" class="dropdown-menu">
<li repeat.for="subMenu of menu.navSettings.subNav" class="dropdown-submenu">
<a href.bind="subMenu.href" if.bind="!subMenu.subNavSettings.subSubNav"><span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title}</a>
<a href.bind="subMenu.href" if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-${ subMenu.subNavSettings.icon }"></span> ${subMenu.title} <span class="caret-right"></span>
</a>
<ul if.bind="subMenu.subNavSettings.subSubNav" class="dropdown-menu">
<li repeat.for="lowestSubMenu of subMenu.subNavSettings.subSubNav" class="dropdown-submenu">
<a href.bind="lowestSubMenu.href"> <span class="glyphicon glyphicon-${ lowestSubMenu.subSubNavSettings.icon }"></span> ${lowestSubMenu.title}</a>
</li>
</ul>
</li>
</ul>
<!--<span class="divider" if.bind="menu.navSettings.divider"> </span>-->
</li>
</ul>
Finally here is the route containing the first level dropdown options including the divider:
{
route: "clients",
name: "clients",
moduleId: PLATFORM.moduleName("../components/clients/clientList/clientList"),
title: "Clients",
nav: true,
settings: {
nav: [
{
href: "#clients/clientsList",
title: "Client List",
navSettings: {
icon: "list",
roles: ["Employee", "Admin"],
}
},
{
navSettings: {
roles: ["Employee", "Admin"],
divider: true,
}
},
{
href: "#clients/Create",
title: "Create Client",
navSettings: {
icon: "user",
roles: ["Employee", "Admin"],
}
}
],
icon: "user",
auth: true,
roles: ["Employee", "Admin"],
pos: "left"
}
},
You forgot to add quotes around your class-attribute value:
<li repeat.for="menu of route.settings.nav"
class="${menu.navSettings.divider ? 'divider' : 'dropdown-submenu'}">
I am working on a project with Mean JS and I am using the template offered by them at https://github.com/meanjs/mean .
Basically I want to do:
if (more than 1 sub-menus)
make it drop-down
else
make just a button and if that button clicked take it to state of the sub menu.
A button on the navigation bar will be defined as drop-down. It will have 2 sub-menus. This main button will be visible to all types of user. However, only 1 sub-menu on the drop down will be visible to general users. All 2 sub-menus will be visible to the admin users. I want to define it as drop down, but if there is only 1 sub-menu, don't show it as drop-down. When a user clicks on the main button it will take it to the page defined in the sub-menu.
Here is the code that is in the header.client.view.html (This is from the template, I have not change it.)
<nav class="collapse navbar-collapse" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav" ng-if="menu.shouldRender(authentication.user);">
<li ng-repeat="item in menu.items | orderBy: 'position'" ng-if="item.shouldRender(authentication.user);" ng-switch="item.type" ng-class="{ active: $state.includes(item.state), dropdown: item.type === 'dropdown' }" class="{{item.class}}" dropdown="item.type === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle" dropdown-toggle role="button">{{::item.title}} <span class="caret"></span></a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li ng-repeat="subitem in item.items | orderBy: 'position'" ng-if="subitem.shouldRender(authentication.user);" ui-sref-active="active">
<a ui-sref="{{subitem.state}}" ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default ui-sref="{{item.state}}" ng-bind="item.title"></a>
</li>
</ul>
</nav>
Here is what goes in the articles.client.config.js
// Configuring the Articles module
angular.module('articles').run(['Menus',
function(Menus) {
// Add the articles dropdown item
Menus.addMenuItem('topbar', {
title: 'Blog',
state: 'articles',
type: 'dropdown',
roles: ['*'],
position: 1
});
// Add the dropdown list item
Menus.addSubMenuItem('topbar', 'articles', {
title: 'Visit Blog',
state: 'articles.list',
roles: ['user', 'admin']
});
// Add the dropdown create item
Menus.addSubMenuItem('topbar', 'articles', {
title: 'Create Blog Post',
state: 'articles.create',
roles: ['admin']
});
}
]);
I'm writing a dropdown nav in bootstrap and angular with angular-ui-router. When a link has a dropdown, the link should be blank. But if I pass a blank route to ui-sref I get an error.
Here's a code snippet:
<ul class="dropdown-menu">
<li ng-repeat="button in buttons" id="foo" ng-class="{'dropdown-submenu': $index=button.hasLinks}" >
<a ui-sref="{{button.route}}" title="{{ button.text }} Tab" class="{ dropdown-toggle: button.links }" data-toggle="dropdown">
<i class="icon icon-{{ button.icon }}"></i> {{ button.text }}
</a>
<ul class="dropdown-menu">
<li ng-repeat="link in button.links">
<a ng-href="{{ link.route }}" title="{{ link.text }} Tab">
{{ link.text }}
</a>
</li>
</ul>
</li>
</ul>
Currently, as you can read in this topic, ui-sref doesn't handle empty argument, as it is (quoting the author) a misuse of the directive. Upcomming ui-state directive is supposed to handle that, but for now the best way I found was (in Angular 1.3 and above) to use ng-attr as below:
ng-attr-ui-sref="{{ state || undefined }}"
If state is blank, it will yield undefined, and no attribute in effect.
EDIT: Note that as long as it works, it will throw an exception in the console due to ui-router open bug
I solved this issue by not using ui-sref, but rather ng-href:
<a ng-href="{{ ::someObject.href }}">some link</a>
controller:
someObject.href = $state.href('FancyState', params: { id: 123 });