$first in ngRepeat

Question

I have an array $scope.items.

I want if the item is the $first one of the ngRepeat to add the css class in.

Is it something that can be done with angular? Generally how can I handle the booleans in Ajs?

<div ng-repeat="item in items">
   <div class='' > {{item.title}}</div>
</div>

score 131 · Accepted Answer · edited May 23 '17 at 12:03

131

It should be

<div ng-repeat="item in items">
   <div ng-class='{in:$first}' > {{item.title}}</div>
</div>

Look at ng-class directive in http://docs.angularjs.org/api/ng.directive:ngClass and in this thread What is the best way to conditionally apply a class?

edited May 23 '17 at 12:03

Community

1
1

answered Oct 28 '13 at 13:08

Chandermani

42,589
12
85
88

Can you explain how it should work? here is Fiddle where you can implement your way: http://jsfiddle.net/9Ymvt/673/ Thanks – Maxim Shoustin Oct 29 '13 at 08:50

score 3 · Answer 2 · answered Oct 28 '13 at 13:40

You can try approach with method invocation.

HTML

<div ng-controller = "fessCntrl"> 
<div ng-repeat="item in items">
   <div ng-class='rowClass(item, $index)' > {{item.title}}</div>   
</div>
</div>

JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
   $scope.items = [
       {title: 'myTitle1', value: 'value1'},
       {title: 'myTitle2', value: 'value2'},
       {title: 'myTitle3', value: 'value1'},
       {title: 'myTitle4', value: 'value2'},
       {title: 'myTitle5', value: 'value1'}
   ];        

     $scope.rowClass = function(item, index){
         if(index == 0){
             return item.value;
         }
        return '';
    };        
});    
fessmodule.$inject = ['$scope'];

Demo Fiddle

$first in ngRepeat

2 Answers2

Linked