I have a ul li structure like below and need to add blank li after every second element, how its possible with ng-repeat in angular js.
<ul>
<li>content</li>
<li>content</li>
<li class="filler"></li>
<li>content</li>
<li>content</li>
</ul>
<ul>
<li ng-repeat="item in items">item.content</li>
</ul>
One way is to use ng-repeat-start with ng-repeat-end
<li ng-repeat-start="item in items">{{item.content}}</li>
<li ng-repeat-end ng-if="$index % 2 == 1">Filler</li>
<!-- OR -->
<li ng-repeat-end ng-if="$odd">Filler</li>
If the filler is purely a style element you can use css to manage it without using ng-repeat-end
li:nth-child(odd):after{
display:block;
content: ' ';
/** other filler rules **/
}
DEMO
Related
I need to select a distinct dynamic xpath in selenium between 2 pieces of xml that are identical (Dresses). I need to create the dynamic xpath for the second value which clicks the button itself. I have tried: //a[#title = 'Dresses'][#class = 'sf-with-ul'] which selects both the image and the button.
Here is the code:
<li class="sfHoverForce" xpath="1">
Dresses
<ul style="display: none;">
<li>Casual Dresses</li>
<li>Evening Dresses</li>
<li>Summer Dresses</li>
</ul>
</li>
<li id="category-thumbnail" xpath="1">
<div><img src="http://automationpractice.com/img/c/3-0_thumb.jpg" alt="Women" title="Women" class="imgm"></div>
<div><img src="http://automationpractice.com/img/c/3-1_thumb.jpg" alt="Women" title="Women" class="imgm"></div>
</li>
<li class="sfHoverForce" xpath="1">
Dresses
<ul class="submenu-container clearfix first-in-line-xs" style="display: none;">
<li>Casual Dresses</li>
<li>Evening Dresses</li>
<li>Summer Dresses</li>
</ul>
</li>
The only difference between the two nodes are the UL tag - class value. try this xpath to select the second node with anchor,
//ul[contains(#class,'submenu-container')]/preceding-sibling::a[#title='Dresses']
With the HTML you posted, this XPath will work
//a[#title='Dresses'][./following-sibling::ul[contains(#class,'submenu-container')]]
^ find an A tag with a specific title
^ the A tag should have a sibling UL
^ and that UL contains a specific class
You could try this:
//li[a[#title='Dresses']][2]/a
This will get the 2nd a element with title ‘Dresses’. If you want the first element, change the index from 2 to 1.
<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 got some problem on AngularJS.
my controller, mainCtrl, has this variables :
this.colors = {Sam:blue,Jane:red,Tom:pink};
this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}]
And I got this code :
<div ng-controller="mainCtrl as vm">
<ul ng-repeat="obj in arr">
<li ng-style={color:vm.color[obj.person]}>{{obj.story}}</li>
</ul>
</div>
I want that the li will be colored such as the color of the person at colors dictionary . how can I handle that? I got undefined every time, but when I do it explictly its work , for Example :
<li ng-style={color:vm.color['Sam']}>{{obj.story}}</li>
You are using the controllerAs-Syntax, so you must use vm.arr in your ng-repeat. And furthermore you should use the ng-repeat on the list item:
<ul>
<li ng-repeat="obj in vm.arr" ng-style="{color:vm.color[obj.person]}">{{obj.story}}</li>
</ul>
It should look like this.
<div ng-controller="mainCtrl as vm">
<ul>
<li ng-repeat="obj in vm.arr track by $index"
ng-style="{'color':vm.colors[obj.person]}"
ng-bind="obj.story">
</li>
</ul>
</div>
Remember to use your alias vm (controllerAs)
Usetrack by with ng-repeat for better performance.
I think that ng-repeat should have been placed in li
Her's a working jsfiddle http://jsfiddle.net/irhabi/nh4ddemr/
What is the correct syntax to switch from my simple ng-show to a filter in my ng-repeat? (item in list | filter:{item.value == 'abc'} or so)
<ol ng-repeat="item in list">
<li ng-show="item.value == 'abc'">test</li>
</ol>
Do not use ng-repeat inside <ol> tag.
This will repeat <ol> tag each time with single <li>.
Use ng-repeat in <li> tag to repeat <li> tag inside <ol> tag and use filter with ng-repeat.
use like this :
<ol>
<li ng-repeat="item in list | filter: { value : 'abc' }">test</li>
</ol>
working plunkr
<ol ng-repeat="item in list | filter:{value: 'abc'}">
<li>test</li>
</ol>
Plunker: https://plnkr.co/edit/uw0LNygWbj4Njhp1n7PN?p=preview
Try this
<ol ng-repeat="item in list | filter: {value: 'abc'}">
<li>test</li>
</ol>
Angular Filter doc
You can use nf-repeat Filter
<ol ng-repeat="item in list | filter : {value : 'abc'}">
<li>test</li>
</ol>
read AngularJS API Document
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.