I am trying to work out ng repeat animation when I add/remove items from two different arrays one after another but it doesn't seem to work really smoothly on chrome-it works on firefox. Here is the following example codes:
template.html
<ul>
<li ng-repeat='item1 in arr1' class="repeated-item">
<span>{{ item1 }}</span>
</li>
</ul>
index.html
<div>
<div ng-include='template.html'></div>
<ul>
<li ng-repeat='item2 in arr2' class="repeated-item">
<span>{{ item2 }}</span>
</ul>
</div>
I notice animation works quite well for outside repeat except ng-included template. Hope you guys can help to figure out this.
You didn't close the <div ng-include='template.html'> tag properly. Add the closing tag </div>.
Related
<ol>
<li>Please find things here..</li>
<span ng-repeat="list in vm.ListObject | unique:'value'| orderBy">
<li>Search for "{{list.value}}"</li>
<li>Proceed</li>
</span>
<li>Click "Checkout" and complete the requi`enter code here`red fields</li>
<li>Click "Submit Requests"</li>
</ol>
" It is working fine in Chrome.
But not working as expected in IE. The list is starting from span tag again"
This is likely due to <ol> elements requiring <li> children. You're code is trying to render a <span> as a child of an <ol> to faciliate the ng-repeat - IE will probably fail to handle this as gracefully as Chrome.
If you're using angular 1.2+, you can replace the ng-repeat directive with the ng-repeat-start and ng-repeat-end directives to work around this issue:
<ol>
<!-- add ng-repeat-start -->
<li ng-repeat-start="list in vm.ListObject | unique:'value'| orderBy">
Please find things here..
</li>
<li>Search for "{{list.value}}"</li>
<li>Proceed</li>
<!-- add ng-repeat-end -->
<li ng-repeat-end>
Click "Checkout" and complete the requi`enter code here`red fields
</li>
<li>Click "Submit Requests"</li>
</ol>
Here's a link to the documentation for more information on this
I've a deep nested ng-repeat lists, and only in the last loop I've to display alternate content if list was empty. I'm new to angular, saw some posts online please help me where can I use content if list is empty. The ng-repeat=sessions in day could be empty.
<ul class="day">
<li ng-repeat="sessions in day">
<ul class="table-view">
<li class="table-view-cell" ng-repeat="(heading, session) in sessions">
<span class="group">{{heading}}</span>
<ul class="cell">
<li class="cell-content" ng-repeat="val in session" ng-click="getSession(val.id)">
<div class="time" style="background-color:#{{val.color}}">
<span>{{val.start | date:"h:mma"}}</span>
<span>to</span>
<span>{{val.end | date:"h:mma"}}</span>
</div>
<div class="session" ng-class-odd="'odd'" ng-class-even="'even'">
<span class="name">{{val.name}}</span>
<span class="room">Room: {{val.room}}</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
1). CSS approach. I usually use pure CSS approach in such cases. With this markup (stripped extra-html):
<ul class="day">
<li ng-repeat="sessions in day">
...
</li>
<li class="no-sessions">
No sessions on this day.
</li>
</ul>
and CSS rules to hide .no-sessions li by default and make it visible only if there are no previous li tags:
li.no-sessions {
display: block;
}
li + li.no-sessions {
display: none;
}
So when sessions array is empty, there will be no li rendered and only no-sessions one will be visible. And if will hide as soon as there is at least one session on this day.
Demo: http://plnkr.co/edit/KqM9hfgTTiPlkdmEevDv?p=preview
2). ngIf approach. Of course you can use ngIf/ngShow directives for show no-records element when sessions array is empty:
<li ng-if="!day.length">
No sessions on this day.
</li>
I think this would work for your case:
<li ng-hide="day.length > 0">
No sessions on this day.
</li>
No extra CSS needed. Assumes day is an array.
http://plnkr.co/edit/WgDviOKjHKS1Vt5A5qrW
I would recommend handling that in your controller. Keeping your logic in the controller and javasript makes debugging easier and more manageable. I can think of 2 approaches: using ng-show/ng-hide or a condition for your day variable when its empty.
Option 1
ng-show/ng-hide approach:
$scope.isDayEmpty = function(){
return $scope.day.length > 0 ? false : true;
}
html:
<ul class="day">
<li ng-repeat="sessions in day" ng-hide="isDayEmpty">
...
</li>
<li ng-show="isDayEmpty">
No Sessions this Day
</li>
</ul>
Option 2:
ng-repeat approach
if($scope.day.length == 0){
$scope.day.push("No Sessions this Day");
}
This should get you essentially the same result. The first approach would make your CSS styling easier assuming you want to do something different in that case.
The second approach can vary in style depending on your code but thats an example of how you can do it. I don't know your javascript so I can't be more specific to your scenario.
Hi all you experts out there.
My testing area: http://plnkr.co/edit/ddJT1e4a8L5NTSIVNTk7
I am trying to visualize hierarchical data in a tree-form with Angular, even though i'm using some samples to aid me in my quest (like http://jsfiddle.net/alalonde/NZum5/ and http://jsfiddle.net/brendanowen/uXbn6/8/) i fail.
As soon as i place the recursive element ng-include inside the ng-repeat in side the template it self, the memory usage of its browser-window goes through the roof and effectively hangs the browser. But the available tree-sample i could find are doing just that.
What am i missing?
You need to use the same variable name in the template. The current node is called node in the controller then child in the template.
This cause the template to render the same node over again.
It works fine if you use the same variable name :
<li ng-repeat="node in node.children" ng-include="'node.html'"></li>
See it in action here : http://plnkr.co/edit/mjfdSEDcMK8kGCRjS6V6?p=preview
If anyone here wants to avoid having the extra ng-repeat outside of the template (where it kind of includes stuff from the template anyway), here's a fiddle showing how to do it:
http://jsbin.com/hokupe/1/edit
Also here's a blog post and a 10-15 minutes video on how it works:
http://gurustop.net/blog/2014/07/15/angularjs-using-templates-ng-include-create-infinite-tree/
Sample Code:
<script type="text/ng-template" id="treeLevel.html">
<ul>
<li ng-repeat="item in items">
<input type="checkbox"
name="itemSelection"
ng-model="item._Selected" />
{{item.text}}
<div ng-include=" 'treeLevel.html'"
onload="items = item.children">
</div>
</li>
</ul>
</script>
<div ng-include=" 'treeLevel.html' "
onload="items = sourceItems">
</div>
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.
this is my basic scenario. For a list of items (summary view) i want to show details view of item that got clicked on the same page.
I took this jsfiddle example and transformed it into this jsfiddle. If you look at the behavior it does work for first time but it is not consistent.
Maybe someone can help me with this, or suggest a better approach. I would like to have a different controller for managing the list and a different controller to handle the detail view.
One way of transforming the example (provided that you want to use ngSwitch) would be:
<ul ng-controller="ListController">
<li ng-repeat="item in items" ng-controller="ItemController">
<div ng-click="open(item)">{{item.content}}</div>
</li>
<hr>
<ng-switch on="anyItemOpen()">
<div ng-switch-when="true">
<div ng-controller="ItemController">
{{opened.name}}: overlay: tweet, share, pin
</div>
<a ng-click="close()">close</a>
</div>
</ng-switch>
</ul>
And here is the working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/
Your jsFiddle didn't work since you were trying to reference item created in the ngRepeat scope (and thus not available outside of the ngRepeat).