I want to hide the parent li if child li is empty. Here is the jsfiddle link where I want to hide the parent li label TWO.
<ul id='ListNav'>
<li ng-repeat='mainList in lists.list' ng-hide='subList.length<0' >
<a>{{mainList.label}}</a>
<ul>
<li ng-repeat='subList in mainList.subList'>{{subList.label}}</li>
</ul>
</li>
</ul>
To solve this problem just change:
<li ng-repeat='mainList in lists.list' ng-hide='subList.length<0' >
To
<li ng-repeat='mainList in lists.list' ng-show="mainList.subList.length>0" >
Demo
you cant use subList at that level try changing it for mainList.subList
<ul id='ListNav'>
<li ng-repeat='mainList in lists.list' ng-hide='mainList.subList.length==0'> <a>{{mainList.label}}</a>
<ul>
<li ng-repeat='subList in mainList.subList'>{{subList.label}}</li>
</ul>
</li>
</ul>
http://jsfiddle.net/nepfw2qf/7/
Related
I want to add isActive class to an item menu when user click on this item, and remove isActive class from all others items.
I am trying to compare the id, this is the angularJS code:
$rootScope.isActive = function(idVal, event){
return idVal === event.target.id;
}
This is a part from Menu Html code:
<ul class="sidebar-nav">
<li>
<a ui-sref="" id='101' ng-class="{active: isActive($event, 101)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Rules
</a>
<ul class='dropdown sidebar-nav-dropdown' >
<li>
Transaction Mapping
</li>
<li>
File Setup
</li>
<li>
Code Setup
</li>
</ul>
</li>
<li>
<a href="#" id='102' ng-class="{active: isActive($event, 102)}">
<span class='glyphicon glyphicon-ban-circle glyph-sidebar'></span>
Administrative Rules
</a>
<ul class='dropdown sidebar-nav-dropdown'>
<li>
<a ui-sref="admin.mapping-rules">Transaction Mapping</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">File Setup</a>
</li>
<li>
<a ui-sref="admin.mapping-rules">Code Setup</a>
</li>
</ul>
</li>
</ul>
Thanks,
First of all, you shouldn't use the root scope. You should use the scope of the controller associated to that view.
Second, your code doesn't make much sense. $event can be used as a parameter of a function called... to react to an event:
ng-click="doSomething($event)"
But with ng-class, there is no $event.
All you need to have in your scope is the ID (or name, or whatever identifies a menu item) of the selected menu item:
$scope.selectedMenuItem = null;
When an item is clicked, you need to change the selected menu item:
ng-click="selectMenuItem(101)"
$scope.selectMenuItem(item) {
$scope.selectedMenuItem = item;
}
Then to associated a css class with the selected menu item, you simply need
ng-class="{active: selectedMenuItem === 101}"
That said, if all your links navigate to a given router state, you don't even need that selectedMenuItem. All you need is to add the active class if the current router state is the one the that the link allows navigating to (assuming $state is on your scope):
ng-class="{active: $state.includes('admin.mapping-rules')}
I have the following data which i want to use ng repeat on:
$scope.doctors=[{patch:'BARIJPUR',doctor:'RAMA SENA',doctor:'SMRITI IRANI',doctor:'JAGDISH NAIR',
patch:'KIRI',doctor:'ASHISH NAIK',doctor:'SMRITI IRANI',doctor:'SAIRAJ NAIK',
patch:'JAMNAGAR',doctor:'RATAN PANDEY',doctor:'RAMAN SHIVOLKAR'
}];
Im trying to use it like this:
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' >{{doc.patch}}</span>
<ul>
<li><span>{{doc.doctor}}</span></li>
</ul>
</li>
</ul>
</div>
the current output im getting is shown in the following link:
current output
the expected output im getting is shown in the following link:
expected output
am i doing something wrong? have been at it for 1 and half hour now!
From your comment I assume that you're having a problem with the JS associative array, so here is an example of implementation:
$scope.doctors=[
{patch:'BARIJPUR',doctors:['RAMA SENA' 'SMRITI IRANI', 'JAGDISH NAIR',]},
{patch:'KIRI', doctors:['ASHISH NAIK', 'SMRITI IRANI', 'SAIRAJ NAIK']},
{patch:'JAMNAGAR', doctors:['RATAN PANDEY', 'RAMAN SHIVOLKAR']}
];
<div id='cssmenu' class="visible-xs" >
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li class='has-sub' ng-repeat="doc in doctors"><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doctor in doc.doctors"><a href='#'><span>{{doctor}}</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
try this
You have two problems:
Array definition
Instead of creating multiple doctor entities you should just create an array of them:
$scope.doctors=
[
{"patch":"BARIJPUR", "doctors":["RAMA SENA", "SMRITI IRANI","JAGDISH NAIR"]},
{"patch":"Anna", "doctors":["ASHISH NAIK", "SMRITI IRANI", "SAIRAJ NAIK"]},
{"patch":"Peter","doctors":["RATAN PANDEY", "RAMAN SHIVOLKAR"]}
];
ng-repeat
You used it in wrong place. It should be applied to <li> element - which basically you want to repeat, not to <a> or <span>:
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Doctors</span></a></li>
<li ng-repeat="doc in doctors" class='has-sub'><a href='#'><span>{{doc.patch}}</span></a>
<ul>
<li ng-repeat="doc in doc.doctors"><a href='#'><span>{{doc}}</span></a></li>
</ul>
</li>
</ul>
Demo plnkr
<div class="row" ng-repeat="doc in doctors">{{doc.patch}}
<div class="cell" ng-repeat="cell in doc.doctor">{{cell}}
</div>
</div>
yes this works for me! done! solved!
Here is my code
<ul kendo-menu k-orientation="horizontal" k-options="kendomenu">
<li ng-repeat="toplevel in UserMenu.TopLevels" class="k-item k-state-default" role="menuitem" >
<span class="k-link">
{{toplevel.name}}
<span class="k-icon k-i-arrow-s"></span>
</span>
<ul class="k-group k-menu-group k-popup k-reset" role="menu" ng-repeat="level2 in toplevel.levels" >
<li class="k-item k-state-default" ng-repeat="view in level2.views"><span class="k-link" ng-click="addTab(view.name,getTemplate(view.link))">{{view.name}}</span></li>
</ul>
</li>
</ul>
I want to open this LI on UL click
<li class="k-item k-state-default" ng-repeat="view in level2.views"><span class="k-link" ng-click="addTab(view.name,getTemplate(view.link))">{{view.name}}</span></li>
Kendo Menu has a property which you can set to open the menu on click instead of Hover.
In your Controller create a property as
$scope.kendoMenuOptions = {
openOnClick: true
};
and then in the HTML set the options as:
k-options="kendoMenuOptions"
How would one join collections with Firebase and then later use it in an angular repeat?
Heres my database structure in Firebase:
I want to join wishes with the appropriated list and listId - but how?
And would I be able to do as such?:
<ul>
<li ng-repeat="list in lists">{{list.listName}}
<ul>
<li ng-repeat="wish in lists.wishes">{{wish.itemName}}</li>
</ul>
</li>
</ul>
Hope thing make sense!
You could try below snippet.
<ul>
<li ng-repeat="list in lists">{{list.listName}}
<ul>
<div ng-repeat="wish in lists.wishes">
<li>{{wish.itemName}}</li>
<li>{{list.listId}}</li>
<div>
</ul>
</li>
</ul>
<div> inside ul is not allowed but in HTML5 it will work without breaking anything, Refer Link
I have this CSS selector, which just won't bind .live(), but works perfectly with .bind():
$('.treeView li ~ :has("ul")').prev('li')
I've read somewhere, that using the .prev() and .next() could be troublesome coupled with .live(), so I wanted to create an pure CSS selector (or ANYTHING that works with .live()!) to do the job - but I just can't figure it out!
Here's what I want to do:
Select all li-elements, which is followed by an li containing an ul.
Here's an HTML markup example, I want to select the ones where the comment says "selected"
<div class="treeView" id="processSegmentsTree">
<ul>
<li>Ostetanke</li> //selected
<li>
<ul>
<li>Tank 1</li>
<li>Tank 2</li>
</ul>
</li>
<li>Presse</li> //selected
<li>
<ul>
<li>Sub-leaf 1</li>
<li>Sub-leaf 2</li> //selected
<li>
<ul>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Any help is much appreciated, since this is a bit of a thorn in my eye :(
There is no such Selector to accomplish this task.
What I highly recommend you to do is to add ANYTHING as a flag to use when selecting your desired elements.
add attribute, wrapper, ANYTHING YOU WANT, then the task will be as easy as it should be.
This may work: // not css selector
$(".treeView li:has('ul')").prev();