CODEWITHSUNDEEP
javascripthtmlcssangularjs
Links
Links

Reputation: 227

How to add a class to first html element in my case?

I am using angular framework for my app.

I wanted to add a class to only the first element of my ng-repeat.

<div class='onlyFirst' ng-repeat = 'task in tasks'>{{task.chore}}</div>

However, the above code will apply to all my div and I only need first div having the onlyFirst class. Is there anyway to do it?

thanks a lot!

Upvotes: 0

Views: 69

Answers (3)

codedigger
codedigger

Reputation: 154

If you want to apply specific CSS to only the first child, you could also leverage CSS' first child selector:

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

Upvotes: 0

Remento
Remento

Reputation: 927

You can use ng-class and with the $first variable which is available in a ng-repeat.

<div  
   ng-repeat = 'task in tasks' 
   ng-class="{onlyFirst:'$first'}"
   >{{task.chore}}</div>

Related docs:

Upvotes: 1

turtlepick
turtlepick

Reputation: 2714

Try something like this:

ng-class="{onlyFirst : $first}"

So your code could look like this:

<div ng-repeat = 'task in tasks'>
    <div ng-class="{onlyFirst : $first}">{{task.chore}}</div>
</div>

Reference: http://docs.angularjs.org/api/ng/directive/ngRepeat

Upvotes: 3

Related Questions