Is it possible to split this ng-repeat loop in angularjs? I have a set of tabs and the data is found in workspace in workspaces. I want to basically check a condition ng-if "savedSettings=='account'", show specific tab. ng-if"savedSettings=='shelf'" show tab. How can I work this conditional render in?
There are four tabs found in this workspace.
<li ng-repeat="workspace in workspaces" class="workspace.activeclass">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
Use the ng-show directive:
<li ng-repeat="workspace in workspaces"
class="workspace.activeclass"
ng-show="workspace.tabid == savedSetting">
<a id="workspace.tabid" href="{{workspace.hrefid}}" data-toggle="tab"> {{workspace.name}}
</a>
</li>
For more information, see
AngularJS ng-show Directive API Reference
Related
I'm new to angularjs. Here is my code
<ul>
<li ng-if="book.account.Customer.HasWorkspaceAccess"><a href ng-click="book.setType('workspace')" class="clickable">Book a Workspace</a></li>
<li ng-if="book.account.Customer.HasMeetingRoomAccess"><a href ng-click="book.setType('meetingroom')" class="clickable">Book a Meeting Room</a></li>
<li ng-if="book.account.Customer.HasBoardRoomAccess"><a href ng-click="book.setType('boardroom')" class="clickable">Book a Boardroom</a></li>
<li>My Account</li>
</ul>
Somehow all a tags is not working for the first tap on mobile device. It's active after tapping and second tap will trigger the ng-click function.
Thanks in advance for any help.
Can any one provide me reference to angularjs dropdown with action links as shown in the image? From the action list if we mouse over on any lable separate action list should be shown out. Please see the attached screen shot for reference. I should be able to have part2 also as shown in the image. The official Angularjs UI Bootstrap dropdown menu (ui.bootstrap.dropdown) provides only one list of actions (part1 from the image)
As of now I have used the following normal code which is working fine :
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn dropdown-toggle" dropdown-toggle>
Save Options <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href ng-click="saveFilter(ui3DataSet)">Save Filter</a></li>
<li><a href ng-click="saveAsFilter(ui3DataSet)">Save Filter As</a></li>
</ul>
</div>
But now when I mouse over saveFilter(ui3DataSet), another list should be shown on the right side. I am looking for any Angularjs plugin provides this feature readily.
As per #Dmitri Zaitsev, the following solves the issue:
<li class="dropdown-submenu">
<a href ng-click="saveAsFilter(ui3DataSet)">Others</a>
<ul class="dropdown-menu">
<li> One </li>
<li> two </li>
</ul>
</li>
Here is a pure Bootstrap implementation:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3#comments
You could wrap it into Angular directive if you want to (see e.g. the implementation of jQuery Passthrough by UI Utils).
Also other threads that might be of help/related:
Dynamically creating nested navigation menu item using Bootstrap and Angularjs
AngularJS multilevel dropdown menu for a menu structure generated from a recursive directive
Angular UI multi-level Dropdown Toggle
I've got a Bootstrap navbar dropdown menu, where clicking the parent link produces the dropdown list (default behaviour). The dropdown list of the parent is built using ngRepeat from an array of navigation data, and each has a ui-router state parameter, so it looks like:
<li class="dropdown">
<a href class="dropdown-toggle" data-toggle="dropdown">
Parent Link
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in navCtrl.items()"
ui-sref-active="active">
<a ui-sref="some.state({ paramKey: paramValue })">
{{item.link}}
</a>
</li>
</ul>
</li>
But, even though it does seem to drop the active class on my link it throws this error in the console:
TypeError: Cannot read property 'name' of undefined
I am not entirely sure about the answer, but, as far as I know, why would you use navCtrl.items() using brackets? I have never seen it used like that before. Wouldn't the old item in items ng-repeat work? Sorry if it does not help at all.
I'm trying to create a menu using angular. A menu item can have children requiring another ng-repeat to print the sub nav items. I'm noticing some strange behavior when attempting to insert an anchor tag within the 2nd ng-repeat.
Link to fiddle: http://jsfiddle.net/npU7t/
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
With
{
title: 'menu item with children',
sub_menu: [
{
title: '<-- empty anchor tag???'
}
]
}
Results in
<li ng-repeat="sub_menu_item in menu_item.sub_menu" class="ng-scope">
<-- empty anchor tag???
</li>
Where the did duplicate / empty anchor tag come from? How can I prevent it from being created?
Appreciate the help!
This isn't a bug with Angular, but rather how you have your markup.
UPDATE:
The issue is actually the nested <a> tag, not the <ul> tag.
<a href="">
<span class="title">{{ menu_item.title }}</span>
<ul class="sub-menu" ng-if="menu_item.sub_menu">
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
</ul>
</a>
In fact, if you remove Angular from the equation altogether, you will see that the extraneous <a> tag is still added to the DOM: http://jsfiddle.net/jwcarroll/cXkj4/
If you get rid of the nested <a> tag, then the extra element will disappear.
<a href="">
<span class="title">{{ menu_item.title }}</span>
</a>
<ul class="sub-menu" ng-if="menu_item.sub_menu">
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
</ul>
In both HTML 4.01, and HTML 5, having a nested <a> tag is a no no.
The simplest possible recreation of the problem I could come up with is this bit of markup:
<a href="">Outer
<p>Blah
Inner
</p>
</a>
Because you can't nest <a> elements within each other, the browser is doing it's best to recreate your intent while keeping the DOM clean. What you end up with is this:
Outer
<p>
Blah
Inner
</p>
This makes sense when you realize what the browser is trying to do. The browser is trying to do three things:
Keep Outer, Blah and Inner text elements inside hyperlinks
Contain Blah and <a>Inner</a> inside a single <p> tag
Ensure no <a> tags are nested within each other
The only sensible way to accomplish all three of these is to wrap both Outer and Blah text elements in separate <a> tags in a way that isn't nested. This is the closest approximation to the original intent without breaking the DOCTYPE rules.
I hope this helps.
Very strange. It doesn't appear with any tag besides <a> (like <p> or <div>). It looks like an outright bug to me - I'd submit a proper bug report.
I'm creating a sitemap in a custom CMS powered by Angular.
I hide the lower levels of pages and toggle their visibility with a button. I add ng-animate to animate the "opening" of the lower levels of the sitemap.
This works fine for the <ul>, but I would rather have its child <li> enter with a longer transition-delay for every item for a nice waterfall effect and this is where I get stuck.
At first I figured simply adding a transition-delay to the <li> would be sufficient, but for whatever reason I'm even unable to add a regular transition to the <li>. I read about the -stagger class, but it never gets applied.
Markup:
<ul>
<li ng-repeat="page in data"
ng-class="{'children-visible': isVisible}"
ng-init="isVisible = false">
{{page.pagename}}
<button ng-if="page.sub"
ng-click="$parent.isVisible = !isVisible">
</button>
<ul ng-if="page.sub"
ng-show="isVisible"
ng-animate="'animate'">
<li ng-repeat="page in page.sub">
{{page.pagename}}
</li>
</ul>
</li>
</ul>
Here's a picture of the markup if it helps you, er, picture it:
If relevant, I use version 1.2.16 of both angular.js and angular-animate.js.
So, in short: How do I add a stagger/transition delay to children of an element with ng-show?