Styling the first visible item in ngRepeat using Angular

Question

Styling the first visible item in ngRepeat using Angular

I am working with a list that is generated using ngRepeat, which looks like this

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

My goal is to make the first item in the list have rounded corners. I have defined a style as shown below

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

How can I apply this style to only the first visible item? Keep in mind that the visibility of the first item may change dynamically based on the search input connected to the key.

css angularjs angularjs-ng-repeat

Answer 1

Answer №1

utilize the $first variable to represent the initial iteration in an ng-repeat loop

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

update: because initial-item includes a hyphen, it needs to be enclosed in quotation marks

Answer 2

utilize the $first variable to represent the initial iteration in an ng-repeat loop

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

update: because initial-item includes a hyphen, it needs to be enclosed in quotation marks

Answer 3

Answer №2

To apply rounded borders to the first item in a list group, you can utilize the css selector first-child:

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

Answer 4

To apply rounded borders to the first item in a list group, you can utilize the css selector first-child:

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

Answer 5

Answer №3

The most effective method in Angular is:

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

Alternatively, you can refer to Sasi Kiran's solution for more insights ;)

Answer 6

The most effective method in Angular is:

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

Alternatively, you can refer to Sasi Kiran's solution for more insights ;)

Answer 7

Answer №4

To implement conditional formatting based on the $index variable in an ng-repeat loop, you can follow this example:

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

Answer 8

To implement conditional formatting based on the $index variable in an ng-repeat loop, you can follow this example:

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

Answer 9

Answer №5

To achieve this effect, you can utilize the $first and ng-class directives. The $first property is accessible on the local scope for each item in the repeated list. It evaluates to true if the item is the first one in the list. You can implement this in your HTML code like so:

<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>

Answer 10

To achieve this effect, you can utilize the $first and ng-class directives. The $first property is accessible on the local scope for each item in the repeated list. It evaluates to true if the item is the first one in the list. You can implement this in your HTML code like so:

<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>

Styling the first visible item in ngRepeat using Angular

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The value of the bound variable in ng-options does not get updated after the array is

Enhancing real-time updates with discrete solutions

The model name should not be overridden if it is already being used in different fields

Why isn't my topmenu positioned correctly on screens of varying widths due to responsive CSS?

After deploying DRF, the CSS in Django admin is not displaying

Minimum width of Angular Material's mat-menu

Achieving Full Height for Parallel Columns Divs with Bootstrap - A How-To Guide

jQuery-UI tabs appearing on various elements

Styling a PrimeFaces panelGrid within a data table using CSS

Having trouble getting the ionic lib update command line to work properly?

Guide on linking AngularJS user interface with Python server via RESTful API?

.htaccess rules for rewriting URLs in AngularJS using html5mode and ui-router

Once an element is removed from ng-repeat, it does not provide the capability to remove or conceal the element from

Angular - Dynamically Apply Attributes Based on Screen Size

AngularJS fails to display JSON data

Table borders not displaying properly in Chrome when cells are hidden

Text affected by mix-blend-mode glitch

How about using a circle inset clip path technique?

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

I'm having trouble getting my button to float correctly on the right side