CODEWITHSUNDEEP
javascripthtmlcssangularjs
Hmahwish
Hmahwish

Reputation: 2232

Angularjs find last visible element in ng-repeat

I want to change the color of the last element in the list which is displayed as follows ,

 <div  ng-repeat="item in items">
<h3 ng-hide="(hideStudent && item.role == 'student')" ng-class="{'last':$last}">{{item.name}}</h3>
</div>
 <button type="button" ng-click="(hideStudent = true)" >Hide Students</button>

CSS:

.last {
color: #800;
 }

When I click on the "Hide Students" buttons then all students will be hiddden . Now if the last item is a student and its hidden then the last displayed element color is not getting changed because the $last does not seems to see if the element is hidden or not . I can use ng-if in place of ng-hide but wanted to know if this can be done in any other way rather than using ng-if.

Upvotes: 2

Views: 949

Answers (1)

John V
John V

Reputation: 875

try use :last-child pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-child

Upvotes: 3

Related Questions