Angular apply style to the first visible item in ngRepeat

Question

I have a list generated by ngRepeat, like so

<ul class="list-group">
    <li class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>

and I want the first item in the list to have rounded corners. I have a style such as

.first-item {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

How can I cause this style to be applied to the first visible item? Note that the key is connected to a search box, so the first item is dynamic.

It probably easier to handle using CSS and `:first-child` selector. — Stubb0rn, Dec 01 '15 at 19:47
@Stubb0rn you are right! i should have thought of that, but I guess I had angular on the brain. Also i was assuming that the filter works using "display:none"... but it doesn't. — John Henckel, Dec 01 '15 at 21:06

score 6 · Answer 1 · edited Dec 01 '15 at 21:54

6

use $first, that represents the first iteration within a ng-repeat

<ul class="list-group">
    <li ng-class="{'first-item':$first}"
class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>

edit: since first-item has a dash, it must be in quotes

edited Dec 01 '15 at 21:54

John Henckel

10,274
3
79
79

answered Dec 01 '15 at 19:52

Sasi Kiran

116
5

@SasiKiran yes. it works. Thanks. But I also had to change the borders in my class to !important. there is a conflict with another class in the bootstrap css. That is why i prefer Bastien's answer. – John Henckel Dec 02 '15 at 15:29

score 4 · Accepted Answer · answered Dec 01 '15 at 19:48

4

You can use the css rule first-child:

.list-group li:first-child { 
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}

http://www.w3schools.com/cssref/sel_firstchild.asp

answered Dec 01 '15 at 19:48

FakeSkdr

106
6

This is the only solution that works for me. Using `ng-class="{'first-item':$first}"` does not work for me, because bootstrap already has a selector `.list-group-item:first-child` which is apparently more specific. – John Henckel Dec 01 '15 at 21:13

score 2 · Answer 3 · answered Dec 01 '15 at 19:52

2

Pure Angular Way would be:

<ul class="list-group">
    <li class="list-group-item" ng-repeat="data in tree | filter:key track by $index" ng-class="{MyClassName: $index == 0}">
        {{data.name}}
    </li>
</ul>

or see answer of Sasi Kiran ;)

answered Dec 01 '15 at 19:52

David

153
7

score 1 · Answer 4 · answered Dec 01 '15 at 19:54

You can use the $index variable value to do such conditional formatting within ng-repeat. Here's an example:

<ul class="list-group">
    <li class="list-group-item" 
        ng-repeat="data in tree | filter:key" 
        ng-class="{'first-item': $index == 0}">
        {{data.name}}
    </li>
</ul>

Pratik Bhattacharya · Answer 5 · 2015-12-01T20:15:57.783

0

Use $first and ng-class. $first is a property which is exposed on the local scope, for each item in the repeated list. It's value is true if the item is the first one in the repeated list. The HTML should look something as below:

<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key" ng-class="{'.first-item': $first}">
    <div>{{data.name}}</div>
</li>

edited Dec 01 '15 at 20:15

answered Dec 01 '15 at 20:05

Pratik Bhattacharya

3,596
2
32
60

Angular apply style to the first visible item in ngRepeat

5 Answers5