angularjs - Angular JS : How to find first and last element in ng-repeat and add special class to them?

Question

我使用 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 的最后一个元素中。

Answer 1

只需将 $first 和 $last 与 ng-class 结合使用:

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

在此处查看它们的工作原理:https://docs.angularjs.org/api/ng/directive/ngRepeat