I want to loop li with different condition and apply different html depending on that condition.
If i code this way
<ul ng-repeat="item in items">
<li ng-if="item == '1'">
<div><span> <span>My test 123</span>
{{item }}
</span></div>
</li>
<li ng-if="item == '2'">
<div><span class="xyz"> <span class="abc">My new test XXX</span>
{{item }}
</span>
<span>123</span>
</div>
</li>
</ul>
It repeat as
<ul ng-repeat="item in items">
<li>My test 123
1</li>
</ul>
<ul ng-repeat="item in items">
<li>
My new test XXX
2 123</li>
</ul>
But i want
<ul ng-repeat="item in items">
<li>My test 123
1</li>
<li>
My new test XXX
2 123</li>
</ul>
Any solution?
Thanks.
Repeat on the DOM element you want repeated?
<ul>
<li ng-repeat="item in items">{{item }}</li>
</ul>
<ul >
<li ng-repeat="item in items">{{item }}</li>
</ul>
Related
I only want to catch the first list item with a css selector.
That can i do?
<ul>
<li class="someclass"> </li>
<li id="thisId" class="someclass"> </li>
<li id="thatId" class="someclass"> </li>
<li id="someId" class="someclass"> </li>
<ul>
ul li.someclass:first-child{
}
How to implement iteration in ng-class ? , below is my code
<div class="list-message">
<ul>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(i++)}" >
<a href ng-click="setTab(i++) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
</ul>
</div>
<div class="detail-message">
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(i++)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
</div>
And the result that i want is like the example below.the iterarion inside ng class will be count iterarion number.
<div class="list-message">
<ul>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(1)}" >
<a href ng-click="setTab(1) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(2)}" >
<a href ng-click="setTab(2) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet(3)}" >
<a href ng-click="setTab(3) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
</ul>
</div>
<div class="detail-message">
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(1)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(2)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
<ul ng-repeat="mainList in itemsList track by $index" ng-show="isSet(3)">
<li ng-repeat="x in mainList">
{{x.message_detail}}
</li>
</ul>
</div>
Thank You , appreciate every single your comment and help.
Using $index will help you to keep a track of index.
$index is a iterator offset of the repeated element (0..length-1).
You can use it like.
<li ng-repeat="mainList in itemsList" ng-class="{ active: isSet($index)}" >
<a href ng-click="setTab($index) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
use $index to keep track of index in ng-repeat
<ul>
<li ng-repeat="mainList in itemsList track by $index" ng-class="{ active: isSet($index)}" >
<a href ng-click="setTab($index) " ng-repeat="x in mainList">
{{x.message_text}}
</a>
</li>
</ul>
Is there a way for me to do a nested ng-repeat call, but not having it create a nested structure.
I.e.
Say I have this in my script:
$scope.animals = {
dog : {
rupert: {
size: 'big'
}
},
cat : {
jon: {
size: 'small'
},
don: {
size: 'small'
}
},
pig : {
mike: {
size: 'big'
}
}
}
and this in my html
<ul>
<ul ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ul>
</ul>
Here is a plunkr : http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview
Basically at the moment this creates something like this:
<ul>
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
</ul>
<ul>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
</ul>
I'd like it to make something like this:
<ul>
<li>
<span>
This is don the cat, he is really small.
</span>
</li>
<li>
<span>
This is jon the cat, he is really small.
</span>
</li>
<li>
<span>
This is rupert the dog, he is really big.
</span>
</li>
<li>
<span>
This is mike the pig, he is really big.
</span>
</li>
</ul>
So is there a way to formulate this to get this result, do something of this sort (this doesn't work lol)
<ul>
<ng-repeat="(type,animal) in animals">
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
</ng-repeat>
</ul>
*note I'd like to avoid doing this
<ul>
<li ng-repeat="(name,description) in animals.dog">
<span>
This is {{name}} the dog, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.cat">
<span>
This is {{name}} the cat, he is really {{description.size}}.
</span>
</li>
<li ng-repeat="(name,description) in animals.pig">
<span>
This is {{name}} the pig, he is really {{description.size}}.
</span>
</li>
</ul>
You could probably create a couple of dummy ng-repeat-start/ng-repeat-end directives for the top level repeater.
<ul>
<!-- Remove it with an ng-if -->
<li ng-repeat-start="(type,animal) in animals" ng-if="0"></li>
<!-- Or do -->
<!-- <li ng-repeat-start="(type,animal) in animals" ng-if="::type<0"></li> -->
<li ng-repeat="(name,description) in animal">
<span>
This is {{name}} the {{type}}, he is really {{description.size}}.
</span>
</li>
<!-- Remove it with an ng-if -->
<li ng-repeat-end ng-if="0"></li>
<!-- Or do -->
<!-- <li ng-repeat-end ng-if="::type<0"></li> -->
</ul>
Plnkr
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post
I have this html code for student records and its working good
<li ng:repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
</li>
But i have few few more nested levels of details which i want to show like this
<ul>
<li ng:repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
if {{ student.subjects}} > 0
//some indenting
<ul>
<li ng:repeat="subject in subjects">
<a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
if {{ subjects.assignments}} > 0
<ul>
<li ng:repeat="subject in subjects">
<a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
<li>
</ul>
<li>
</ul>
</li>
</ul>
But i don't know the angular syntax , how can i do that
You can use ng-show on child UL elements, and iterate each level in its own ng-repeat. Note: You don't need things like if {{ student.subjects}} > 0 (That's not a valid JS code btw). ngRepeat won't iterate if collection is empty:
<ul>
<li ng-repeat="student in students">
<a href='#/student/{{ student.id }}'>{{ student.number }}</a>
<ul ng-show="student.subjects && student.subjects.length">
<li ng-repeat="subject in student.subjects">
<a href='#/student/subject/{{ subject.id }}'>{{ subject.name }}</a>
<ul ng-show="subject.assignments && subject.assignments.length">
<li ng-repeat="assignment in subject.assignments">
<a href='#/student/subject/assignment/{{ assignment.id }}'>{{ assignment.name }}</a>
<li>
</ul>
<li>
</ul>
</li>
</ul>