AngularJS - Select dynamic ng-repeat DOM element in directive

Question

Problem:
I have a directive which has a list <ul> and dynamically generated list items <li>s. I want to change the css of one of these <li> items.

Here's the code the for the template attribute of the directive:

<ul>
    <li ng-repeat="color in colors" ng-class="{selected: (color===selected) }" ng-click="pick(color)" style="background-color:{{color}};"></li>
</ul>

I want to change the css of the third element, that is $first + 2, but I don't know how to access it.

What I've tried
1) Since I want the directive to work without jQuery I've been trying with angular.element (which is jqLite). I can access the <ul> by angular.element.find('li') or just element.children() inside the link of the directive but I can't seem to get "further down" than that, because they are dynamically created (I guess).

2) I've been trying to access it through $first+2 and adding a css class to it in the ng-repeat like this:

<ul>
    <li ... ng-class="{ ... , cssClass: ($first+2) }" ...></li>
</ul>

But then all <li> elements are affected.

Here's a working plunker

@charlietfl thanks, it solved my problem. Post as answer and I will accept. — simeg
– simeg, Commented Jan 10, 2015 at 15:10

charlietfl · Accepted Answer · 2015-01-10 15:13:37Z

1

Can use $index

<li ng-class="{ cssClass: $index == 2 }"></li>

answered Jan 10, 2015 at 15:13

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - Select dynamic ng-repeat DOM element in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related