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;
}
Related
I have created a hamburger menu and there is toggle function for displaying subcategories this toggle function is working fine until i apply filter on them. After searching a category through filter toggle function not working.
this is my html code
<ul class="nav navbar-nav">
<div id="menuToggle" class="sidenav">
<ul id="menu">
<li>
<input class="form-control" type="search" [(ngModel)]="txtToSearch" placeholder="Search"/>
</li>
<li *ngFor="let category of (componentContents.dashboardMenu | dashboardFilter : txtToSearch); let i = index" >
<p class="toggleMenu" (click)="toggleMenu(i,componentContents.dashboardMenu)">{{category.category}}
</p>
<div *ngIf="category.show">
<ul id="{{(category.category).split(' ').join('-')}}" *ngIf="category.subCategory.length > 0">
<li *ngFor="let subCat of category.subCategory">
<a routerLink={{subCat.router}} routerLinkActive="active">
<span class="glyphicon glyphicon-bell" ></span>{{subCat.subcategory}} </a></li>
</ul>
</div>
<hr />
</li>
</ul>
in component.ts im using this code for toggle function
toggleMenu(index, catArry) {
if (catArry[this.prevClicked] && this.prevClicked !== index) {
catArry[this.prevClicked].show = false;
}
catArry[index].show = !catArry[index].show;
this.prevClicked = index;
}
The index variable is applicable only to the current result. So when the filter is applied, the result changes and the index does not correspond to the actual position of element in array.
You can pass the category itself to the toggleMenu(category, catArray) function instead of index and calculate the index in toggleMenu function using catArray.indexOf(category)
I have Menu list which contains Sub-Menu as shown in the code below.
<li class="current">
<span class="icon4"></span>Subscriptions
<ul class="sub-menu">
<li>View Subscriptions
</li>
<li class="#((ViewBag.PageName == " Subscription ") ? "active " : " ")">Manage Subscription Plans
</li>
</ul>
</li>
<li class="current">
<span class="icon5"></span>Administration
<ul class="sub-menu">
<li class="#((ViewBag.PageName == " AssetPage ") ? "active " : " ")">Assets
</li>
<li>Configure Text
</li>
<li>Error Log
</li>
<li>Product Settings
</li>
</ul>
</li>
<li class="current">
<span class="icon6"></span>Promo Codes
<ul class="sub-menu">
<li>Manage Promo Code
</li>
<li>Used Promo Code
</li>
</ul>
</li>
Here Subscription,Administration,Promo Codes are Menu Lists which contains Sub-Menu Lists under them.
The thing is I want to apply class=current dynamically when a user clicks on Subscription,Administration,Promo Codes`.
And I am doing this in LayoutPage of MVC.
Any help will be appreciated.
Here you have a working solution: https://jsfiddle.net/c4h3sup9/
You have to use a little bit of Javascript for that.
You have to give the listitems a other class name like in my example "operator"
document.body.addEventListener("click", function(e){
if(e.target && e.target.className == "operator"){
var actives = document.getElementsByClassName("active");
actives[0].setAttribute("class", "operator");
e.target.setAttribute("class", "active");
}
});
for this example you need to assing one element as active from the beginning.
Note:
LI elements are never parents of UL.
The order is:
Unordered List (Plural) -> List item (Singular, Child).
You might want to correct that as it is not standard conform.
To add the class name to the parent <li> element, give the main links a class name. Assuming you also want to remove it from any <li> elements that already have it, also give them a class name
<li class="container">
<span class="icon4"></span>Subscriptions
and the script will be
$('.mainmenu').click(function() {
$('.container').removeClass('current'); // remove any previous
$(this).closest('.container').addClass('current');
});
In addition, if when you navigate to one of the views with this layout, and what to add the class name to the appropriate element, then you can give the <li> elements an id attribute
<li id="subscriptions" class="container">
....
</li>
<li id="administration" class="container">
....
and in the GET method, pass the value of the id to the view (e.g. using ViewBag
public ActionResult ConfigureText()
{
ViewBag.Menu = "administration";
....
return View(...);
}
and add a script that runs when the page first loads
var menu = '#ViewBag.Menu";
$('#' + menu).addClass('current');
I have a list of li items with functions attached to them. I also have an event listener which attaches a class of "current" to whichever li item is being clicked.
HTML
<ul class="cf" id="filter">
<li ng-click="getRadius(5)" class="current">5 km</li>
<li ng-click="getRadius(10)">10 km</li>
<li ng-click="getRadius(25)">25 km</li>
<li ng-click="getRadius(50)">50 km</li>
<li ng-click="getRadius(100)">100 km</li>
</ul>
Is there a way to disable the ng-click event if that specific li item has a class of "current" or is there a better way to go about this?
You cannot disable a list cause its not a interactive element can use ngClass to apply a specific class when disabled to make it appear disabled:
<li ng-class="{'disabled':condition}"ng-click="getRadius(5)">item</li>
You can use ng-if to remove those items completely from the list:
<li ng-if="!condition" ng-click="getRadius(5)">item</li>
<li ng-if="condition" >item</li>
If you use button tag as trigger instead of li, you can use ng-disabled directive to permit click by a condition. For example:
<ul class="cf" id="filter">
<li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
<li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
<li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
<li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
<li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>
If you want, you can customize button style and you can show it like a standart text element.
.cf button {
border: none;
background: none;
}
// template
<ul class="cf" id="filter">
<li ng-click="!clickLi[5] && getRadius(5)" class="current">5 km</li>
<li ng-click="!clickLi[10] && getRadius(10)">10 km</li>
<li ng-click="!clickLi[25] && getRadius(25)">25 km</li>
<li ng-click="!clickLi[50] && getRadius(50)">50 km</li>
<li ng-click="!clickLi[100] && getRadius(100)">100 km</li>
</ul>
// controller
function MyController($scope) {
$scope.clickLi = {
5: true
};
$scope.getRadius = function(li_id) {
$scope.clickLi[li_id] = true;
console.log(li_id);
};
}
A demo on JSFiddle.
Possible workaround:
If you need a single selection you can add variable into the scope specifying which row is selected and generate your list with the ng-repeat, then you can add lazy checking on ng-click if current $index is equal to selected index, you can use the same condition to apply current class with ng-class.
For example:
app.js
$scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];
app.html
<ul class="cf" id="filter">
<li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}">{{distance}} km</li>
</ul>
Sizzle does not return all the elements which match the selector. Here is JSBin Demo showing the problem.
HTML
<h4> Playing with Sizzle JS </h4>
<ul class="list">
<li> Item 1 </li>
<li class="row"> Item 2 </li>
<li class="row"> <span>Item 3</span> </li>
<li class="divider">List item with unique class name </li>
</ul>
<ul class="list">
<li> Item 1 </li>
<li class="row"> Item 2 </li>
<li class="row"> <span>Item 3</span> </li>
<li class="divider">List item with unique class name </li>
</ul>
JS
var selector = 'UL.list > LI:eq(1)';
var elements = Sizzle(selector);
console.log(elements.length); //Says 1
My Question is:
Why it returns only 1 element while there are 2 elements which match the selector?
How can I make sizzle to return all matching elements ?
UL.list > LI:eq(1) will only ever return one element: the 2nd element that matches UL.list > LI, as indicated by :eq(1).
If you're looking for all li elements, remove the :eq().
If you're looking for every li that is the second child, use :nth-child():
var elements = Sizzle('UL.list > LI:nth-child(2)');
Im need your help, cause i'm looking for a solution to handle a multifilter in MixItUp.
So i use the Park example of the site, but my version didn't work :). So here is my code + a jsfiddle. Can someone figure out what i have done wrong?
So the filter is working, but only with one filter attribute. So if i try to select one attribute of the first filter it will be set to .active and when i choose one attribute of the second filter the .active switch to these attribute. -> http://jsfiddle.net/zm3j3/
I want to do it like here. -> http://mixitup.io/demos/parks
<div id="Filters">
<ul class="filter_leucht">
<span class="title">Leuchtentype</span>
<ul class="">
<li class="filter" data-dimension="leuchtentype" data-filter="all">All</li>
<li class="filter" data-dimension="leuchtentype" data-filter="leucht1">Leucht1</li>
<li class="filter" data-dimension="leuchtentype" data-filter="leucht2">Leucht2</li>
</ul>
</ul>
<ul class="filter_regionen">
<span class="">Regionen</span>
<ul class="title">
<li class="filter" data-dimension="regionen" data-filter="all">All</li>
<li class="filter" data-dimension="regionen" data-filter="region1">Region1</li>
<li class="filter" data-dimension="regionen" data-filter="region2">Region2</li>
</ul>
</ul>
</div>
<ul id="Referenz" class="layout_list">
<li class="mix region1 leucht1">
<a href="#">
<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" alt="Projekt 1" title="Projekt 1">
</a>
</li>
<li class="mix region1 leucht2">
<a href="#">
<img src="http://i.livescience.com/images/i/000/054/306/i02/beach-health.jpg?1372365869" alt="Projekt 2" title="Projekt 2">
</a>
</li>
<li class="mix region2 leucht2">
<a href="#">
<img src="http://img2.fotoalbum.virgilio.it/v/www1-3/176/176513/304872/IMG_0880-vi.jpg" alt="Projekt 1" title="Projekt 1">
</a>
</li>
<li class="mix region2 leucht2">
<a href="#">
<img src="http://i.livescience.com/images/i/000/054/306/i02/beach-health.jpg?1372365869" alt="Projekt 2" title="Projekt 2">
</a>
</li>
</ul>
And my JS
$(function(){
// INSTANTIATE MIXITUP
$('#Referenz').mixitup({
effects: ['fade','blur'], // List of effects
});
// Bind checkbox click handlers:
$filters.on('click',function(){
var $t = $(this),
dimension = $t.attr('data-dimension'),
filter = $t.attr('data-filter'),
filterString = dimensions[dimension];
if(filter == 'all'){
// If "all"
if(!$t.hasClass('active')){
// if unchecked, check "all" and uncheck all other active filters
$t.addClass('active').siblings().removeClass('active');
// Replace entire string with "all"
filterString = 'all';
} else {
// Uncheck
$t.removeClass('active');
// Emtpy string
filterString = '';
}
} else {
// Else, uncheck "all"
$t.siblings('[data-filter="all"]').removeClass('active');
// Remove "all" from string
filterString = filterString.replace('all','');
if(!$t.hasClass('active')){
// Check checkbox
$t.addClass('active');
// Append filter to string
filterString = filterString == '' ? filter : filterString+' '+filter;
} else {
// Uncheck
$t.removeClass('active');
// Remove filter and preceeding space from string with RegEx
var re = new RegExp('(\\s|^)'+filter);
filterString = filterString.replace(re,'');
};
};
// Set demension with filterString
dimensions[dimension] = filterString;
// We now have two strings containing the filter arguments for each dimension:
console.info('dimension 1: '+dimensions.regionen);
console.info('dimension 2: '+dimensions.leuchtentype);
$('#Referenz').mixitup('filter',[dimensions.regionen, dimensions.leuchtentype])
});
});
Best regards