Angular Setting Class In Ng-Repeat

Question

I am creating a list in an ng-repeat , I need to give all li elements who are the nth child of their father or more , a certain class (in our ng-repeat it means all children who have an index greater than middle) . For example , if the list is 10 items I need to give the 5th,6th...10th li children a class . So if my code is something this -

 [ul]
    [li  ng-repeat="friend in friends"]
       {{friend.name}} who is {{friend.age}} years old.
    [/li]
  [/ul]

What is a possible and good way to assign a class to the children from the middle index and above? My conditions are that I shouldn't change the structure of the html . I can add directives\filters or add things to controllers.

simply add somthing like ng-class="{'yourClass': $index > friends.length / 2}" on the li. — Yoshi
– Yoshi, Commented Aug 27, 2013 at 14:34
yes I'm pretty sure ;) If the logic is subject to change, you could of course extract it from the view and let the controller decide. Eg: ng-class="someConrollerMethod($index, friends)" — Yoshi
– Yoshi, Commented Aug 27, 2013 at 14:35
@Yoshi, you should create an answer. Perhaps a jsfiddle too. — Brian Lewis
– Brian Lewis, Commented Aug 27, 2013 at 14:42
i little bit shorter: ng-class="{'class-name': $index > $middle}" — tschiela
– tschiela, Commented Aug 27, 2013 at 14:45

Yoshi · Accepted Answer · 2013-08-27 14:48:37Z

29

simply use ng-class on the repeated element, eg:

<li
  ng-repeat="friend in friends"
  ng-class="{special: $index > friends.length / 2 - 1}">

  {{friend.name}}
</li>

demo: http://jsbin.com/iFigAYi/1/

or extract the logic, like:

<ul>
  <li ng-repeat="friend in friends" ng-class="getClass($index, friends)">
    {{friend.name}}
  </li>
</ul>

and

$scope.getClass = function getClass(idx, list) {
  return {
    special: idx > list.length / 2 - 1
  };
};

answered Aug 27, 2013 at 14:48

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

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

1 Comment

nuander Over a year ago

I found that "special" had to be in quotes

Collectives™ on Stack Overflow

Angular Setting Class In Ng-Repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related