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>
Related
I want to create a menu like this but without using ng-repeat:
<ul class="sidebar-navi">
<li ng-repeat="item in items" ng-click="showChilds(item)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}
<ul>
<li ng-show="item.active">
<span>First</span>
</li>
<li ng-show="item.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
the problem is that I didn't find a way to pass parameter to this function showChilds (the current li) I tried to work with id but it didn't work:
<ul class="sidebar-navi">
<li id="first" ng-click="showChilds(first)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first.active">
<span>First</span>
</li>
<li ng-show="first.active">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="showChilds(second)">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second.active">
<span>First</span>
</li>
<li ng-show="second.active">
<span>Second</span>
</li>
</ul>
</li>
</ul>
and my controller will contain only this function
$scope.showChilds = function (item) {
item.active = !item.active
}
I don't want to use $scope.items anymore
I have updated your HTML. If you are not using ng-repeat then you can use ng-init to initialize one variable and toggle that variable on ng-click to show/hide sub menus. Your updated sample is here
<ul class="sidebar-navi">
<li id="first" ng-click="first = !first" ng-init="first = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1
<ul>
<li ng-show="first">
<span>First</span>
</li>
<li ng-show="first">
<span>Second</span>
</li>
</ul>
</li>
<li id="second" ng-click="second = !second" ng-init="second = false">
<i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2
<ul>
<li ng-show="second">
<span>First</span>
</li>
<li ng-show="second">
<span>Second</span>
</li>
</ul>
</li>
</ul>
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>
Currently I have two tabs, that I can open by clicking either, but I'd like the first one to be opened by default..
<ul class="nav nav-tabs">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>
<div ng-show="activeTab=='implementation'" >
<h4>test heading</h4>
</div>
<div ng-show="activeTab=='videos'">
<h4>test heading</h4>
</div>
Any suggestions?
What about just initializing activeTab?
<ul class="nav nav-tabs" ng-init="activeTab = 'implementation'">
<li ng-class="{active: activeTab == 'implementation'}">
<a ng-click="activeTab='implementation'">Implementation</a>
</li>
<li ng-class="{active: activeTab == 'videos'}">
<a ng-click="activeTab='videos'">Videos</a>
</li>
</ul>
<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>