I have the following code:
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items | filter:searchText" ng-click="item.expanded = !item.expanded">
{{item.name}} {{templatefolder.expanded}}
<ul ng-show="item.expanded" class="list-group-item">
<li class="list-group-item" ng-class="{'active' : item.id == document.itemId}" ng-repeat="folder in item.folders" ng-click="document.itemId= item.id">
{{folder.name}}
</li>
</ul>
</li>
</ul>
That code works. But, when i click a 'sub item' (item.folders.name) the li is collapsing because he is in the li with the ng-click function.
Is there a way to show the item.folders after a click on a item?
Add $event.stopPropagation(); to your child li so the event doesn't propagate to the parent.
ng-click="document.itemId= item.id; $event.stopPropagation();">
Related
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span></li>
I have a list of items and I want the display to delete icon to the Mouse Enter li(current li) items by default that delete icon will be hidden.
Thanks
You can do it using CSS only (disaply the delete icon if the mouse is on the item),
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<label class="delete-icon" (click)="onDelItem()">
<i class="fa fa-remove"></i>
</label>
</li>
</ul>
in CSS:
.delete-icon {
display: none;
}
.list-group-item:hover .delete-icon {
display: block !important;
}
One of easiest way :- Try this
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="item.toggle = true"
(mouseleave)="item.toggle = false"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="item.toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span>
</li>
</ul>
Try Following
I tried Angular JS first time so so please try to undersrand and Let me know its working or not
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.mouseenter=function($event)
{
var SpanEle=angular.element('<span class="CrossSpan")"><i class="fa fa-remove" style="color:red"></i></span>');
$event.target.append(SpanEle[0]);
}
$scope.mouseleave=function($leave)
{
angular.element(document.querySelector('.CrossSpan')).remove();
}
$scope.SpanClick=function()
{
debugger;
alert('click');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">First</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Second</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Third</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fourth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fifth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Sixth</li>
</ul>
</div>
Try Following Using jquery
You can see Cross on Hover & Can Perform Action on Cross click
//For showing Cross on Hover
$("li").hover(function(){
$(this).append('<span class="CrossSpan"><i class="fa fa-remove"></i></span>');
}, function(){
$(".CrossSpan").remove();
});
//For Click Event
$("li").click(function(){
alert('Cross Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
You should use CSS for such requirements. Handling events can get messy.
Following is a sample of an element being shown on hover:
li > span {
display: none;
}
li:hover > span {
display: block;
}
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
Note: I know original question is based on Angular JS, but the requirement is not dependent of Angular and can be achieved using just CSS. This is what above answer depicts. If there is anything incorrect/inappropriate, please comment it along with your vote. A silent vote does not help anyone.
I have myself an unordered list:
<ul>
<li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 1</li>
<li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 2</li>
<li ng-class="{ 'active': selected }" ng-click="selected = !selcted">Stuff 3</li>
</ul>
I want to apply a class to a list item a user selects. Only one item can have that class at a time. What's the best angular-ish way to approach this? There are about a dozen elements or so, so I'd rather not declare a new variable for each item.
Set a property for each item:
<ul>
<li ng-class="{ 'active': selected == 1 }" ng-click="selected = 1">Stuff 1</li>
<li ng-class="{ 'active': selected == 2 }" ng-click="selected = 2">Stuff 2</li>
<li ng-class="{ 'active': selected == 3 }" ng-click="selected = 3">Stuff 3</li>
</ul>
If you want angular-ish use ng-repat
HTML
<ul ng-repeat="s in stuffs">
<li ng-class="{active:$index==selected}" ng-click="selected=$index">{{s}}</li>
</ul>
JS
$scope.stuffs = ['Stuff 1', 'Stuff 2', 'Stuff 3'];
I have a class name "active" which i want to be added to the selected list item.
Here is how my list style looks like:
<ul class="page-sidebar-menu">
<li class="start active">
<span class="title">Dashboard</span>
</li>
<li >
<span class="title">Pages</span>
<ul class="sub-menu">
<li >
All Page
</li>
<li >
Add Page
</li>
</ul>
</li>
<li>
<span class="title">Posts</span>
<ul class="sub-menu">
<li >
All Posts
</li>
<li >
Add Posts
</li>
</ul>
</li>
</ul>
i want to add class on two places one is "li" under sub-menu and <span class="title">Posts</span>
It should look something like this
I tried something like this but didnt work
$('.page-sidebar-menu ul li a').click(function() {
$('.page-sidebar-menu ul li').removeClass('active');
$(this).addClass('active');
});
Please suggest some solution.
Thank you!
$(".sub-menu li").addClass("active");
$(".title").addClass("active");
To add a class to a the list-element and the title Post element.
If you want to remove a class you can use. '.removeClass([class to be removed])'
function to do so:
$(".sub-menu li").click(function(){
$(".sub-menu li").removeClass('active');//to make sure there will be only one with the class 'active'
$(this).addClass('active');
});
DEMO
I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});
<li class="list ">A
<ul class="names">
<li class="list">1
</li>
<li class="list">2
</li>
</ul>
</li>
<li class="list ">B
<ul class="names selected">
<li class="list selected">1
</li>
<li class="list">2
</li>
<li class="list">3
</li>
<li class="list">4
</li>
</ul>
</li>
<li class="list ">C
<ul class="names">
<li class="list">1
</li>
<li class="list">2
</li>
<li class="list">3
</li>
<li class="list">4
</li>
</ul>
</li>
$('.list').click(function () {
var that = this;
$('.list').each(function () {
if (that == this) return true; //continue
$('.names:not(:hidden)', this).slideToggle();
});
$('ul.names', this).slideToggle();
})
ul.names{display: none;}
li.list{
width:150px;
background:#A9FF7A;
}
ul.names {
width:150px;
background:#A9FF7A;
}
ul.selected{
display: block;
}
li.selected{
background:red;
}
online Sample: http://jsfiddle.net/gyYyd/
B's submenu 1 is highlighted. If I click on menu A or C, then A or C section will be opened, but how do I click PAGE BLANK area (outside of the background color) to go back to B section (to open B section)
Thanks in advance
You can capture clicks on the document object and trigger a click on the required list item.
$(document).click(function() {
var selected = $('.selected:first');
if(!selected.closest('ul.names').is(':visible')) {
selected.closest('.list').trigger('click');
}
});
Also, make sure to return false from your current list item click handler - so that normal clicks on list items don't propagate to the above handler.
DEMO: http://jsfiddle.net/gyYyd/2/