I have a button and I want to put normal is the default value of this button. I have change ng-swich-default to normal but it not catch data from normal in the drop down. It shows only letter. How can I do it with AngularJS? I have never used it as before. Below code:
<span class="priority-select btn-group" dropdown>
<button
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="form.priority === undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="form.priority !== undefined"
ng-src="images/task_approval/priority/{{form.priority}}.png"
alt="priority"/>
<span ng-switch="form.priority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click="set_priority('high')">
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click="set_priority('normal')">
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click="set_priority('low')">
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>
You must declare set_priority() function and change form.priority value with your parameter.
or
you can change inside ng-click in "a" tag.
Something like this:
ng-click="formPriority='high'"
and then
ng-switch="formPriority"
<span class="priority-select btn-group" dropdown>
<button ng-init='formPriority="normal"'
type="button"
class="btn btn-default dropdown-toggle"
dropdown-toggle>
<img
ng-if="formPriority == undefined"
src="images/task_approval/priority/priority-create.png"
alt="priority"/>
<img
ng-if="formPriority != undefined"
ng-src="images/task_approval/priority/{{formPriority}}.png"
alt="priority"/>
<span ng-switch="formPriority">
<span
ng-switch-when="high"
class="btn-text"
translate>High
</span>
<span
ng-switch-when="normal"
class="btn-text"
translate>Normal
</span>
<span
ng-switch-when="low"
class="btn-text"
translate>Low
</span>
<span
ng-switch-default
class="btn-text"
translate>Priority
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a ng-click='formPriority="high"'>
<img src="images/task_approval/priority/high.png" alt="high"/>
<span translate>High</span>
</a>
</li>
<li>
<a ng-click='formPriority="normal"'>
<img src="images/task_approval/priority/normal.png" alt="normal"/>
<span translate>Normal</span>
</a>
</li>
<li>
<a ng-click='formPriority="low"'>
<img src="images/task_approval/priority/low.png" alt="low"/>
<span translate>Low</span>
</a>
</li>
</ul>
</span>
Related
i have the following problem, i am trying to use two dropdowns using javascript and bulma framework
but the problem is that only one dropdown is displayed when I click on it but if I click on the second one it doesn't open.
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
JavaScript Code:
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
I have the respective libraries loaded both bulma and jquery, but I still can't get both dropdowns to work.
You are on the right track, but you're using .querySelector() incorrectly. See the docs:
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document
Emphasis mine.
The solution is to use .querySelectorAll(). This will return an array of all the dropdowns. You can then iterate through them and attach an eventlistener to them.
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});
Issue: Whenever I click to 1st link it always select both link.
I want to know how can I update the Angular route component?
Router Link:
{ path: 'gantt/:id', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' } },
{ path: 'gantt', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' } },
Component Code:
constructor(
injector: Injector,
private _http: Http,
private _workItemsServiceProxy: WorkItemsServiceProxy,
private _notifyService: NotifyService,
private _tokenAuth: TokenAuthServiceProxy,
private _activatedRoute: ActivatedRoute,
private _fileDownloadService: FileDownloadService,
private params: ActivatedRoute ) {
super(injector);
this._activatedRoute.params.subscribe(val => {
var paramId = params.snapshot.params["id"];
if (paramId) {
this.initiativeFilter = paramId;
this.nameFilter = 'strategy.id=' + this.initiativeFilter;
}
});
}
Html Template:
<nav id="m_ver_menu"
class="{{ui.getSideBarMenuClass()}}"
data-menu-vertical="true"
[attr.data-menu-dropdown]="ui.getIsMenuDropdown()"
[attr.data-menu-scrollable]="ui.getIsMenuScrollable()"
data-menu-dropdown-timeout="500"
[attr.aria-label]="l('LeftMenu')">
<ul class="m-menu__nav {{ui.getMenuListClass()}}"
role="menubar"
[attr.aria-label]="l('LeftMenu')">
<ng-template ngFor let-menuItem [ngForOf]="menu.items" let-mainMenuItemIndex="index">
<li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length > 0}" aria-haspopup="true" data-menu-submenu-toggle="hover">
<a [routerLink]="[menuItem.route]" *ngIf="!menuItem.items.length && !menuItem.external" class="m-menu__link m-menu__toggle"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
[attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
<i class="m-menu__link-icon {{menuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(menuItem.name)}}</span>
</span>
</a>
<a [attr.href]="[menuItem.route]" *ngIf="!menuItem.items.length && menuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
[attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
<i class="m-menu__link-icon {{menuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(menuItem.name)}}</span>
</span>
</a>
<a href="javascript:;" *ngIf="menuItem.items.length" class="m-menu__link m-menu__toggle"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
[attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
<i class="m-menu__link-icon {{menuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(menuItem.name)}}</span>
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<nav class="m-menu__submenu" *ngIf="menuItem.items.length" [attr.aria-label]="l(menuItem.name)">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav"
[attr.aria-label]="l(menuItem.name)"
role="menu">
<ng-template ngFor let-childMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
<li *ngIf="showMenuItem(childMenuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu"
aria-haspopup="true"
data-menu-submenu-toggle="hover"
role="none">
<a [routerLink]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length && !childMenuItem.external" class="m-menu__link m-menu__toggle"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childMenuItem.name)}}</span>
</span>
</a>
<a [attr.href]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length && childMenuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childMenuItem.name)}}</span>
</span>
</a>
<a href="javascript:;" class="m-menu__link m-menu__toggle" *ngIf="childMenuItem.items.length"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childMenuItem.name)}}</span>
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<nav class="m-menu__submenu" *ngIf="childMenuItem.items.length" [attr.aria-label]="l(menuItem.name)">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav"
[attr.aria-label]="l(menuItem.name)"
role="menu">
<!-- Menu Level 3 -->
<ng-template ngFor let-childOfChildMenuItem [ngForOf]="childMenuItem.items" let-childOfChildMenuItemIndex="index">
<li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="m-menu__item--active " class="m-menu__item m-menu__item--submenu"
aria-haspopup="true"
role="none"
data-menu-submenu-toggle="hover">
<a [routerLink]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length && !childOfChildMenuItem.external" class="m-menu__link m-menu__toggle"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childOfChildMenuItem.name)}}</span>
</span>
</a>
<a [attr.href]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length && childOfChildMenuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childOfChildMenuItem.name)}}</span>
</span>
</a>
<a href="javascript:;" class="m-menu__link m-menu__toggle" *ngIf="childOfChildMenuItem.items.length"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childOfChildMenuItem.name)}}</span>
</span>
<i class="m-menu__ver-arrow la la-angle-right"></i>
</a>
<nav class="m-menu__submenu" *ngIf="childOfChildMenuItem.items.length" [attr.aria-label]="l(menuItem.name)">
<span class="m-menu__arrow"></span>
<ul class="m-menu__subnav"
[attr.aria-label]="l(menuItem.name)"
role="menu">
<!-- Menu Level 4 -->
<ng-template ngFor let-childOfChildOfChildMenuItem [ngForOf]="childOfChildMenuItem.items" let-childOfChildMenuItemIndex="index">
<li *ngIf="showMenuItem(childOfChildOfChildMenuItem)" routerLinkActive="m-menu__item--active " class="m-menu__item m-menu__item--submenu"
role="none">
<a [routerLink]="[childOfChildOfChildMenuItem.route]" *ngIf="!childOfChildOfChildMenuItem.external" class="m-menu__link"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childOfChildOfChildMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
</span>
</a>
<a [attr.href]="[childOfChildOfChildMenuItem.route]" *ngIf="childOfChildOfChildMenuItem.external" class="m-menu__link" target="_blank"
role="menuitem"
aria-haspopup="true"
aria-expanded="false"
tabindex="-1">
<i class="m-menu__link-icon {{childOfChildOfChildMenuItem.icon}}"></i>
<span class="m-menu__link-text">
<span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
</span>
</a>
</li>
</ng-template>
</ul>
</nav>
</li>
</ng-template>
</ul>
</nav>
</li>
</ng-template>
</ul>
</nav>
</li>
</ng-template>
</ul>
I believe, whenever the 1st link hits one it always hits the parent route which is gantt and the parameter. Both tyff.. and Long list from same component and rote, So it never updated for parameter one. Whenever I click on the Long list it always recognizes as a Long list but never selects the tyffy one.
Please help me to solve the issues.
You need to add in each li (where routerLinkActive is used) [routerLinkActiveOptions]="{exact:true}"
using this you can configure RouterLinkActive by passing exact: true. This will add the classes only when the url matches the link exactly.
So your code should be like
<li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="m-
menu__item--active" [routerLinkActiveOptions]="{exact:true}" class="m-
menu__item m-menu__item--submenu">
<a .... </a>
</li>
I have the following HTML item (menubox):
<div class="uiContextualLayerPositioner uiLayer" data-testid="undefined" data-ownerid="u_0_10" style="width: 473px; left: 288px; top: 290px;">
<div class="uiContextualLayer _5v-0 _53il uiContextualLayerBelowLeft">
<div class="_54nq _57di _558b _2n_z" id="u_0_y">
<div class="_54ng">
<ul class="_54nf" role="menu">
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item1</span>
</span>
</a>
</li>
<li class="_54ni _5ipo _54nd __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" data-testid="notif_setting_higlights" role="menuitemcheckbox" aria-checked="true">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8">
</i>
<span class="_54nh">Item2</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_Kw8-3yVLtZo sx_864bd8"></i>
<span class="_54nh">Item3</span>
</span>
</a>
</li>
<li class="_54ni _5ipo __MenuItem" role="presentation">
<a class="_54nc _54nu" href="#" role="menuitemcheckbox">
<span>
<i class="mrs img sp_ey5BbZl6hUH sx_780712">
</i>
<span class="_54nh">Item4</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
and i can see that Item1 is deselected, and Item2 is selected with:
aria-checked="true"
and i want to deselect Item2 and select Item1. For this purpose take objectID from Item1 that says it's selected
_54nc _54nu
and call
document.getElementById("_54nc _54nu").setAttribute("aria-checked", true)', 'about: blank', 0)
but nothin happens. What did i missed?
P.S. I see that all object-ID's of class are same, but i also tried other id's. Maybe I misunderstood the issue of id for the class, and maybe the way it is different. Please give me directions. :)
document.getElementById() is incorrect since none of your element has any id.
You want to use document.getElementsByClassName()
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
<li>
<a href="#">
<i class="entypo-tools"></i>
<span class="title">PHP-SDK</span>
<span class="badge badge-secondary">3</span>
</a>
<ul>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/installation">
<i class="entypo-inbox"></i>
<span class="title">Installation</span>
</a>
</li>
<li class="dropdown-submenu">
<a href="/mypage_v2/sdk/getStarted">
<i class="entypo-docs"></i>
<span class="title">Getting Started</span>
</a>
</li>
<li>
<a href="#">
<i class="entypo-flash"></i>
<span class="title">API-Endpoints</span>
<span class="badge badge-info">3</span>
</a>
<ul>
<li>
<a href="#">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
<span class="badge badge-success">4</span>
</a>
<ul>
<li>
<a href="/mypage_v2/sdk/newsletter">
<i class="entypo-newspaper"></i>
<span class="title">sample1</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletterEmail">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/newsletteranalytics">
<i class="entypo-newspaper"></i>
<span class="title">sample2</span>
</a>
</li>
<li>
<a href="/mypage_v2/sdk/sample2">
<i class="entypo-newspaper"></i>
<span class="title">NewslettersProcess</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
If you use php rendering and on menu item click page refreshes, you can add class for example "active" to parent li(s), and in styles add li.active {display:block} or something like that style to show hidden elements
Finally i am ok with the condition of laravel routes
<li #if(Request::path() == "mypage_v2/applications/lists" || Request::path() == "mypage_v2/applications/register") class="active opened")#endif>