AngularJS - apply CSS class on first visible element (Prefer No JQuery)

Question

I have an horizontal list of folders.
I want to have a margin-left between folders(for spacing) but i dont want it to apply on the first item (so there will be no space from screen).
The problem is that 'first-child' applies on hidden elements as well.
how can i apply a class on the first visible item in list without using jQuery ?

<ul id="myList">
  <li ng-repeat="folder in viewmodel.folders" id="folder" class="folder"
      ng-show="folder.role == '13' || folder.role == '14'" ng-click="bringChildren(folder)" loading-directive>
    <div class="block"></div>
    <div class="folderIcon {{ folder.nameKey }}"></div>
    <div class="folderName">{{ folder.displayName }}</div>
    <div class="itemsCounter"></div>
  </li>
</ul>

Is it possible to just use margin-right? If you don't have anything else after your list, it could be a possible solution. — fasfsfgs
– fasfsfgs, Commented Mar 8, 2015 at 14:10
Have you considering using a filter on your list, instead of ng-show? — Kroltan
– Kroltan, Commented Mar 8, 2015 at 14:40
well the margin-right could be a solution however i have other inline elements so there is a problem — liorafar
– liorafar, Commented Mar 8, 2015 at 15:22
what do you mean filter on your list? do filter on ng-repeat? I was not familiar with that — liorafar
– liorafar, Commented Mar 8, 2015 at 15:23

John Bledsoe · Accepted Answer · 2015-03-08 14:22:57Z

2

Use ngIf rather than ngShow, since ngIf actually adds/removes the element from the DOM based on the specified condition. Then your first-child CSS selector will work fine.

answered Mar 8, 2015 at 14:22

John Bledsoe

17.8k5 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dairon · Accepted Answer · 2015-03-08 14:01:25Z

0

with CSS selector you especifiq what item you aplicate the style. use padding-left: 15px; in full elements of uoy list and the first child padding-left: none and this sobrewrite.

answered Mar 8, 2015 at 14:01

Dairon

12 bronze badges

Comments

balajisoundar · Accepted Answer · 2015-03-08 14:40:27Z

0

use ng-class like the follow and get the first element by queryselector and change the style.

<li ng-repeat="folder in viewmodel.folders" id="folder" 
  ng-show="folder.role == '13' || folder.role == '14'" ng-click="bringChildren(folder)" loading-directive  ng-class="{element:folder.role == '13' || folder.role == '14',folder:true}">

and then apply style like this.

document.querySelector(".element").style.marginLeft=0;

edited Mar 8, 2015 at 14:40

answered Mar 8, 2015 at 14:09

balajisoundar

5712 silver badges11 bronze badges

2 Comments

liorafar Over a year ago

Hi bala thanks for quick reply ! however i need this to apply only for the first item and not for both

balajisoundar Over a year ago

queryselector selects the first element only. So the style will only apply to first element

Collectives™ on Stack Overflow

AngularJS - apply CSS class on first visible element (Prefer No JQuery)

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related