Angular Js: Как найти первый и последний элемент в ng-repeat и добавить к ним специальный класс?

Я изменил следующее, используя angular js

<section id="social">
    <h2 class="line">Social Profiles</h2>
    <a href="#" class="first"><i class="icon-facebook"></i></a>
    <a href="#"><i class="icon-twitter"></i></a>
    <a href="#"><i class="icon-linkedin"></i></a>
    <a href="#"><i class="icon-google-plus"></i></a>
    <a href="#" class="last"><i class="icon-rss"></i></a>
    <div class="clear"></div>
</section>

Для этого

<section id="social">
    <h2 class="line">Social Profiles</h2>
    <a ng-repeat="sMedia in socialMedia" ng-if="$first" href="#" >
        <i class="{{sMedia.icon}}"></i>
    </a>
    <div class="clear"></div>
</section>

Все кажется прекрасным, за исключением того, что я не смог найти способ добавить class="first" в первый элемент и class="last" в последний элемент ng-repeat.

Ответ 1

Просто используйте $first и $last в сочетании с ng-классом:

<a ng-repeat="sMedia in socialMedia" ng-class="{'first': $first, 'last': $last}" href="#" >

См. здесь, как они работают: https://docs.angularjs.org/api/ng/directive/ngRepeat

Ответ 2

Вы можете использовать:

#social a:first-child{ /* your first css code */ }
#social a:last-child{ /* your last css code */ }