Code:
<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
ng-click="historyController.showFilterHistoryDurationDropdown = true"
when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
<p>
Show {{historyController.filter}}
</p>
<i class="fas fa-angle-down"></i>
<ul class="input-dropdown"
ng-if="historyController.showFilterHistoryDurationDropdown">
<li ng-class="{'active': historyController.filter === 'All'}"
ng-click="historyController.filter = 'All';
historyController.showFilterHistoryDurationDropdown = false">
Show All
</li>
<li ng-class="{'active': historyController.filter === 'In Progress'}"
ng-click="historyController.filter = 'In Progress';
historyController.showFilterHistoryDurationDropdown = false">
Show In Progress
</li>
<li ng-class="{'active': historyController.filter === 'Completed'}"
ng-click="historyController.filter = 'Completed';
historyController.showFilterHistoryDurationDropdown = false">
Show Completed
</li>
</ul>
</div>
All of this works perfectly. When the <div class="input-dropdown-wrapper...> gets clicked, the <ul> appears as it should.
What I don't understand is why the second part of the ng-click of each <li> doesn't work at all.
Specifically talking about this part: historyController.showFilterHistoryDurationDropdown = false".
Setting this value to false should hide the <ul>, just like when you click the <div>, it sets the value to true, causing the <ul> to appear.
If you are looking for some Toggle view solution, ng-click logic should toggle the showFilterHistoryDurationDropdown value Like :
ng-click="historyController.showFilterHistoryDurationDropdown
? historyController.showFilterHistoryDurationDropdown = false
: historyController.showFilterHistoryDurationDropdown = true"
So that when you click on the div having the ng-class will show the list (<ul>), on second click it will hide the list (<ul>)
So your final code should look something like:
<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
ng-click="historyController.showFilterHistoryDurationDropdown ? historyController.showFilterHistoryDurationDropdown = false : historyController.showFilterHistoryDurationDropdown = true"
when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
<p>
Show {{historyController.filter}} <br>
showFilterHistoryDurationDropdown : {{historyController.showFilterHistoryDurationDropdown}}
</p>
<i class="fas fa-angle-down"></i>
<ul class="input-dropdown"
ng-if="historyController.showFilterHistoryDurationDropdown">
<li ng-class="{'active': historyController.filter === 'All'}"
ng-click="historyController.filter = 'All';
historyController.showFilterHistoryDurationDropdown = false">
Show All
</li>
<li ng-class="{'active': historyController.filter === 'In Progress'}"
ng-click="historyController.filter = 'In Progress';
historyController.showFilterHistoryDurationDropdown = false">
Show In Progress
</li>
<li ng-class="{'active': historyController.filter === 'Completed'}"
ng-click="historyController.filter = 'Completed';
historyController.showFilterHistoryDurationDropdown = false">
Show Completed
</li>
</ul>
Hope this helps.. :)
Related
I have an API that load Menu String Looks Like :
<li class="menu-title">
<span>Menus</span>
</li><ul><li class="submenu" [ngClass]="{ 'active' : urlComplete.mainUrl === 'users' }" mCode="SYSTEM" >
<a href="javascript:" [ngClass]="{ 'subdrop' : urlComplete.mainUrl === 'users' }" class="">
<i class='la la-windows'></i>
<span>
System
</span>
<span class="menu-arrow">
</span>
</a>
<ul style="display: none;" [ngStyle]="{ 'display' : urlComplete.mainUrl === 'users' ? 'block' : 'none' }" class=""><li routerLink="/users/user/list" class="" mCode="USERS" >
<a [ngClass]="{ 'active' : urlComplete.subUrl === 'user' }" href="javascript:" class="">
Users
</a>
</li><li routerLink="/users/user/create" class="" mCode="MENU" >
<a [ngClass]="{ 'active' : urlComplete.subUrl === 'menu' }" href="javascript:" class="">
Menus
</a>
</li> </ul>
</li>
</ul><li> <hr> </li>
I want to place this on Agular HTML page. Its shows fine but router link does not work. I understood that its not compile because of dynamic loading.
My front end code below :
ngAfterViewInit(): void {
this._getPermittedMenu();
}
_getPermittedMenu(){
let apiURL = this.baseUrl + "/common/getAuthMenus";
let queryParams: any = {};
this.loginService.sendGetRequest(apiURL,queryParams).subscribe((response: any) => {
// append response
let unFormattedData = response.data;
let data = unFormattedData.replace(/^\s+|\s+$/g, "");
//compile string to html element and sanitize it
this.menuData = this.sanitizer.bypassSecurityTrustHtml(data);
// this.menuData =(this.sanitizer.bypassSecurityTrustHtml(data));
// console.log("REques menu data");
// console.log(this.menuData);
});
}
and I m calling this from
<div id="sidebar-menu" [innerHTML]="menuData" class="sidebar-menu">
The problem is menus show but routerLink can not work link click
I provide some screenshots:
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I'm using Angular Bootstrap 2.2.0 with Angular 1.5.
The keyboard navigation doesn't work on UIB dropdowns even with the keyboard-nav option enabled. Here's my code:
<div class="btn-group"
uib-dropdown
keyboard-nav="true"
on-toggle="vm.setTouchNgModel(open)">
<button type="button"
class="btn btn-secondary btn-dropdown"
ng-class="{'text-muted': !vm.selectedOptionLabel }"
uib-dropdown-toggle
ng-disabled="vm.selectDisabled">
{{ vm.selectedOptionLabel || ((vm.selectPlaceholder | translate) || vm.selectPlaceholder) }}
<i class="caret"></i>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu
role="menu"
aria-labelledby="btn-append-to-single-button">
<li ng-if="vm.inlineOption">
<a ng-click="vm.setSelectModel(vm.inlineOption)">{{ vm.inlineOption[vm.labelProperty] }}</a>
</li>
<li ng-repeat="option in ((vm.filterName && vm.applyFilter(vm.options, vm.filterName, vm.filterOptions, vm.filterExpression)) || vm.options)">
<a role="menuitem" ng-click="vm.setSelectModel(option)">{{ ((option[vm.labelProperty] || option.label || option) | translate) || ((option[vm.labelProperty] || option.label || option) | translate) }}</a>
</li>
</ul>
</div>
I have found the solution, there needs to be a href attribute in the choices <a> tag, for the keyboard-nav to work.
<a> tags need a tabindex attribute to be able to be focused.
Add tabindex="0" to all of them. A value of "0" makes them tabbable in document order.
Here is my code:
Buttons:
<li ><a data-ng-click="Data1 = true;Data2 = false; search.status = ''" href="">ALL PROJECTS</a></li>
<li ><a data-ng-click="Data2 = true;Data1 = false" href="">NOTIFICATIONS</a></li>
Populated data on click of button:
<ul>
<li ng-show="Data1" dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
<a href="">
<h4>{{wd.name}}</h4>
</a>
<p>Status: {{wd.status}}</p>
</li>
<li ng-show="Data2">
<div ng-show="!notificationDataDashord.length">
<span>No Notifications</span>
</div>
</li>
</ul>
<dir-pagination-controls auto-hide="true"></dir-pagination-controls>
Inside the controller:
$scope.Data1 = true;
$scope.Data2 = false;
I am using pagination directive from this link:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Its a problem with the dirpagination that it doesnt update the collections after you load the data again.
See
https://github.com/michaelbromley/angularUtils/issues/208
https://github.com/michaelbromley/angularUtils/issues/137
As a work around obviously
<dir-pagination-controls ng-show="Data1" auto-hide="true"></dir-pagination-controls>
I am a little lost with this issue.
When I click on the - a href tag - i want the li active background color to change to a specific color that I have stored in each object - like so obj.color" = #5c6bc0.
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>
How can I do this? I have tried with ng-style - ng-style="{'active':'background-color': obj.color} but that didn't work.
Thanks
You can do something like
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}" ng-style={backgroundColor: obj.id == tagStates.activeItemID ? obj.color : ''}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>
angular
.module('app', [])
.controller('Ctrl', function() {
this.tags = [
{ name: 'bob' },
{ name: 'rick' },
{ name: 'dave' }
];
})
<body ng-controller="Ctrl as vm">
<ul>
<li ng-repeat="obj in vm.tags" ng-class="{'active': vm.active == obj.name}">
<a ng-click="vm.active = obj.name">{{obj.name}}</a>
</li>
</ul>
{{vm.active}}
</body>
https://plnkr.co/edit/wvKIUtJIb0AE1vpWDtv9?p=preview